以前做三栏布局时,最常用最简单的方法可能就是:采用float+margin来实现,而CSS3的时代,我们可以有另一种比较“时尚”的方法,就是css3中的盒子模型,代码如下:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS3三栏布局</title> <style> .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; } </style> </head> <body> <header> Css3三栏布局 </header> <section> <div class="container"> <div id="middle">middle</div> <div id="left">left</div> <div id="right">right</div> </div> </section> </body> </html
效果如下:
总结:这里面主要用到了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权威指南》作者……
网友评论文明上网理性发言 已有0人参与
发表评论: