1、首先我们需要一个简单的html结构来完成我们的的实验
标准的3列的布局模式,左边列(left column) 的宽度是200px,右边宽度的是150px ,中间的宽度是100%
<body>
<div id="head">
<h1>head</h1>
</div>
<div id="container">
<div id="center" class="column">
center
</div>
<div id="left" class="column">
left
</div>
<div id="right" class="column">
right
</div>
</div>
<div id="footer">
<h1>footer</h1>
</div>
</body>
2、我们开始对页面进行布局
#container { padding-left: 200px; /* LC width */ padding-right: 150px; /* RC width */ }
让container左边和右边空出200px,150px
#container .column { float: left; } #center { width: 100%; } #left { width: 200px; /* LC width */ } #right { width: 150px; /* RC width */ } #footer { clear: both; }
这里设置的center 的宽度为了100%不包括padding,让left div的宽度和我们上面在container流出的左边的padding一致。
#left { width: 200px; /* LC width */ margin-left: -100%; right: 200px; /* LC width */ } #right { width: 150px; /* RC width */ margin-right: -150px; /* RC width */ }
让左边的div移动到左上角。右边的div移动到右上角
3、修复ie6下的bug
* html #left { left: 150px; /* RC width */ }
在ie6下,会出现看不到左边的div,
最后的效果
下面是全部的源代码:
<!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>css 布局</title>
<style type="text/css">
body{
min-width: 988px;
}
#head{
text-align: center;
}
#container{
padding-left: 200px; /*left column width*/
padding-right: 150px; /*right column width*/
overflow: hidden;
}
#container .column{
position: relative;
float: left;
}
#center{
background:#eee;
padding: 10px 20px;
margin: 0 15px;
width: 100%;
min-height: 300px;
overflow:visible;
}
#left{
width:180px;
background:green;
margin-left:-100%;
right: 270px; /*180+60(padding total)+ 30(margin)*/
padding:0 10px; /* LC fullwidth + CC padding */
min-height: 300px;
}
#right{
width: 130px;
background:yellow;
padding: 0 10px;
margin-right: -240px; /*fullwidth + center column padding 尽量大一点,chrome浏览器下,这个div浮动不上来*/
min-height: 300px;
}
#footer{
clear: both;
text-align: center;
}
/*IE6 fix*/
* html #left {
left:100px;
}
</style>
</head>
<body>
<div id="head">
<h1>head</h1>
</div>
<div id="container">
<div id="center" class="column">
center
</div>
<div id="left" class="column">
left
</div>
<div id="right" class="column">
right
</div>
</div>
<div id="footer">
<h1>footer</h1>
</div>
</body>
</html>
参考: http://www.alistapart.com/articles/holygrail