css三列布局

标签：随笔 | 发表时间：2012-11-20 16:39 | 作者：[email protected] (wind)

出处：http://www.callmewind.info/

web平面设计中有一个既经典又基础的问题（据说很多公司面试都考）：三列布局问题，就是一个大盒子，里面竖直再分三块小盒子并排，其中左边的盒子和右边的盒子固定宽度，中间的盒子自适应宽度，无乱怎么样放大缩小浏览器都不会变形。这两天研究了一下这个问题，默认父容器是body，1：设置三个盒子都左浮动且宽度都是33.3%，不行。2：设置三个盒子都左浮动且宽度都是整数的px，一直试到三个盒子沾满整个页面宽度，这明显不行，浏览器一缩小就变形了，这里绝对不能用固定的宽度。

网搜发现其实有两个很好的方法解决这个问题：

1：css2传统方法，让第一个盒子左浮动，第二个盒子右浮动，且都设置好固定宽度，中间第三个盒子只设置一下高度，不要设置宽度或者设置宽度为auto，中间盒子就会去自适应宽度，看一下代码

<html>

<head>
<style type="text/css">
body{margin:0;}
.left{
width:180px;
height:500px;
float:left;
background:#F39;
}
.right{
width:300px;
height:500px;
float:right;
background:#F99;
}
.center{
width:auto;
height:500px;
margin-left:190px;
margin-right:310px;
background:#33C;
}
</style>
</head>

<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>

这里要绝对要注意的就是center这个盒子的margin-left和margin-right，他们是到父容器的左边框和右边框的距离，不是到左边盒子和右边盒子的距离，意思就是center这个盒子的margin-left=190一定要大于left这个盒子的宽width=180,不然他们就会重叠。同理右边

2：用css3的box-flex属性，css3增加了这个属性之后，更方便了，可以不用定义浮动了

<html>

<head>
<style type="text/css">
body{margin:0;}
.box{
display:box;
display:-webkit-box;
display:-moz-box;
background-color:#fff;
width:auto;
height:500px;
border:1px solid #333;
}
.left{
background-color:#f39;
width:182px;
height:500px;
}
.right{
background-color:#f99;
width:300px;
height:500px;}
.center{
background-color:#33c;
box-flex:2;
-moz-box-flex:2;
-webkit-box-flex:2;
margin:0 10px;}</style>
</head>

<body>

</div>
</body>
</html>

这里要注意的是因为css3还没有统一，各个浏览器在 box-flex属性上有自己的定义方式， -moz-box-flex是火狐的， -webkit-box-flex是chrome和safari的，必须全部定义，假如定义chrome的，到了火狐上就不兼容没效果。 box-flex属性，盒子固定宽度就以固定宽度显示，如果没有固定宽度，就自适应宽度，比如 box-flex:2就是自适应，当然2的意思就是父容器总宽度的2份，假如左盒子是1中间是2右边是2，父容器总宽度为500PX，那么左边就是100PX中间是200PX右边是200PX。当然，这里的 box-flex:2可以随便写，因为左右盒子的宽度固定了，浏览器会认为中间盒子的宽度就是剩下的宽度了，设置一个2不起作用了。还有一个要注意的是，这里要注意盒子的顺序，严格的左中右来，如果像第一种方法那样先引用right样式在引用center样式的话，就会变成，左盒子和中盒子固定宽度，右盒子自适应宽度了

看看他们的效果是一致的：

这下无论怎样调整浏览器大小，无论页面在什么样的电脑屏幕下显示都不会变形了。

大家也可以想想一行两列布局这么做？左盒子固定宽度，右盒子自适应宽度，这个应该更简单。

您可能也喜欢：
资讯：早期的宇宙或许只有二维	Winsock配置出错导致不能正常上网	教你如何访问墙外世界——GAE教程	用二维码下载最新美剧	谷歌浏览器Chrome崩溃解决方法
无觅