可能我们习惯了一行两列的布局,一下子不习惯一行三列的布局,一般这个经常用在博客上比较多,一行三列布局有很多方法,譬如左右用绝对定位,中间空出来的区域让内容自动流动进去,只不过中间流动的内容必须在内页边距要设置下宽度,否则左边的内容由于宽度不够,导致页面错位。在这里我是用浮动来设计一行三列的布局：
其中的CSS代码部分：
html,body {
margin:0;
padding:0;height:100%
}
.left {
float:left;
width:140px;
height:100%;
background:#369;
}
.right {
float:right;
width:200px;
height:100%;
background:green;
}
.content {
height:100%;
margin:0 200px 0 140px;
background:#ccc;
}
</style>
备注：html,body 中定义了height的高度为100%，是为了后面的对象能高度自适应,由于IE和Firefox对css的兼容性问题,导致了浏览效果的差异,因此我这里用html,body定义了。再者如果子级对象的高度希望是100%,他的父级对象的高度必须设置为100%,否则子级对象设置的高度没有任何意义,在这里我们父级对象是body.
代码块：
<div class="left">left</div>
<div class="right">right</div>
<div class="content">文文字与内容</div>
