Feb
23
原文：http://matthewjamestaylor.com/blog/perfect-3-column.htm
.colmask、.colmin、.colleft，分别为三列背景的容器，最外层的.colmask设定overflow:hidden;，通过相对定位分成三列。而内容容器.col1、 .col2、 .col3都放在最内层的.colleft里面，通过相对定位定好位置，所以不管.col1、 .col2、 .col3哪一个伸长或缩短，外部的.colmask、.colmin、.colleft都会跟着伸长与缩短，也就实现了我们所要的效果。
.colmask、.colmin、.colleft，分别为三列背景的容器，最外层的.colmask设定overflow:hidden;，通过相对定位分成三列。而内容容器.col1、 .col2、 .col3都放在最内层的.colleft里面，通过相对定位定好位置，所以不管.col1、 .col2、 .col3哪一个伸长或缩短，外部的.colmask、.colmin、.colleft都会跟着伸长与缩短，也就实现了我们所要的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style type="text/css">
body {margin:0; padding:0; font-size:12px;}
.header {width:100%; height:50px; background:#EEE; border-bottom:1px solid #000;}
.colmask {position:relative; clear:both; width:100%; overflow:hidden;}
.colright, .colmid, .colleft {float:left; width:100%; position:relative;}
.col1, .col2, .col3 {float:left; position:relative; overflow:hidden;}
.threecol {background:#BBB;}
.threecol .colmid {right:20%; background:#CCC;}
.threecol .colleft {right:60%; background:#DDD;}
.threecol .col1 {width:58%; left:101%;}
.threecol .col2 {width:18%; left:23%;}
.threecol .col3 {width:18%; left:85%;}
.footer {clear:both; width:100%; height:50px; background:#EEE; border-top:1px solid #000;}
</style>
</head>
<body>
<div class="header">
这里是头部
</div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
</div>
<div class="col2">
这里是左栏
</div>
<div class="col3">
<p>这里是右栏</p>
<p>这里是右栏</p>
<p>这里是右栏</p>
<p>这里是右栏</p>
</div>
</div>
</div>
</div>
<div class="footer">
这里是底部
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style type="text/css">
body {margin:0; padding:0; font-size:12px;}
.header {width:100%; height:50px; background:#EEE; border-bottom:1px solid #000;}
.colmask {position:relative; clear:both; width:100%; overflow:hidden;}
.colright, .colmid, .colleft {float:left; width:100%; position:relative;}
.col1, .col2, .col3 {float:left; position:relative; overflow:hidden;}
.threecol {background:#BBB;}
.threecol .colmid {right:20%; background:#CCC;}
.threecol .colleft {right:60%; background:#DDD;}
.threecol .col1 {width:58%; left:101%;}
.threecol .col2 {width:18%; left:23%;}
.threecol .col3 {width:18%; left:85%;}
.footer {clear:both; width:100%; height:50px; background:#EEE; border-top:1px solid #000;}
</style>
</head>
<body>
<div class="header">
这里是头部
</div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
</div>
<div class="col2">
这里是左栏
</div>
<div class="col3">
<p>这里是右栏</p>
<p>这里是右栏</p>
<p>这里是右栏</p>
<p>这里是右栏</p>
</div>
</div>
</div>
</div>
<div class="footer">
这里是底部
</div>
</body>
</html>
关于a:hover im
菜单栏背景自动延伸
