CSS定义：一行三栏的布局

可能我们习惯了一行两列的布局,一下子不习惯一行三列的布局,一般这个经常用在博客上比较多,一行三列布局有很多方法,譬如左右用绝对定位,中间空出来的区域让内容自动流动进去,只不过中间流动的内容必须在内页边距要设置下宽度,否则左边的内容由于宽度不够,导致页面错位。在这里我是用浮动来设计一行三列的布局：

其中的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;
}


备注：html,body 中定义了height的高度为100%，是为了后面的对象能高度自适应,由于IE和Firefox对css的兼容性问题,导致了浏览效果的差异,因此我这里用html,body定义了。再者如果子级对象的高度希望是100%,他的父级对象的高度必须设置为100%,否则子级对象设置的高度没有任何意义,在这里我们父级对象是body.

代码块：

left

right

文文字与内容

作者：Kenneth
网址：http://www.51rank.net.cn/blog/post/css-buju.html
版权所有。转载时必须以链接形式注明作者和原始出处及本声明。