html5+css3网页制作:三栏布局宽度自适应,三栏布局宽度自适应布局

以前做三栏布局时，最常用最简单的方法可能就是：采用float+margin来实现，而CSS3的时代，我们可以有另一种比较“时尚”的方法,就是css3中的盒子模型，代码如下：HTML>

CSS3三栏布局

.container{

display:-webkit-box;

display:-moz-box;

}

div:not(.container){

-webkit-border-radius:5px;

-moz-border-radius:5px;

border-radius:5px;

background:#999;

border:#00C 2px solid;

}

#left,#right{

width:200px;

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

padding:20px;

}

#middle{

padding:20px;

-webkit-box-flex:1;

-moz-box-flex:1;

-webkit-box-ordinal-group:2;

-moz-box-ordinal-group:2;

margin:0 5px;

}

#right{

-webkit-box-ordinal-group:2;

-moz-box-ordinal-group:2;

}

Css3三栏布局

middle

left

right

效果如下：

总结：这里面主要用到了box-flex属性，这个属性主要是让子容器相对于父容器将宽度按一定的规则划分，如三个子容器分别设置box-flex的值为1,2,3则，三个子容器将按照1:2:3的比例划分宽度。

当然，父容器必须设置成为盒子模型才可以看到效果，比如display:-webkit-box;display:-moz-box;

然而，如果你直接运行上面的代码，chrome里面是没有问题，但是到了FireFox，则变成下面的样子了：

难道这是一个FireFox的Bug？本来左右两边的宽度固定，而中间的却没有自适应宽度。经过与《html5 与css3权威指南》作者的交流，才知道，之所以出现这样的情况是因为没有设置父容器的宽度，当我们给父容器加上width:100%就可以了。。。在此感谢《html5 与css3权威指南》作者……