×

三栏布局宽度自适应布局

作者:商内在2017.01.23来源:Web前端之家浏览:14468评论:0
关键词:布局

以前做三栏布局时,最常用最简单的方法可能就是:采用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

效果如下:

0107460.png

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

当然,父容器必须设置成为盒子模型才可以看到效果,比如display:-webkit-box;display:-moz-box;
然而,如果你直接运行上面的代码,chrome里面是没有问题,但是到了FireFox,则变成下面的样子了:

2.png

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

您的支持是我们创作的动力!
温馨提示:本文作者系商内在 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/biji020.html

网友评论文明上网理性发言 已有0人参与

发表评论: