HTML5+CSS3网页制作:三栏布局宽度自适应
发布时间：2025-05-13 点击：13
以前做三栏布局时，最常用最简单的方法可能就是：采用float+margin来实现，而css3的时代，我们可以有另一种比较“时尚”的方法,就是css3中的盒子模型，代码如下：
1 <!doctype html>2 <html>3 <head>4 <meta http-equiv=content-type content=text/html; charset=utf-8>5 <title>css3三栏布局</title>6 <style>7???? .container{8???????? display:-webkit-box;9???????? display:-moz-box;10???? }11???? div:not(.container){12???????? -webkit-border-radius:5px;13???????? -moz-border-radius:5px;14???????? border-radius:5px;15???????? background:#999;16???????? border:#00c 2px solid;17???? }1819???? #left,#right{20???????? width:200px;21???????? -webkit-box-sizing:border-box;22???????? -moz-box-sizing:border-box;23???????? padding:20px;24???? }25???? #middle{26???????? padding:20px;27???????? -webkit-box-flex:1;28???????? -moz-box-flex:1;29???????? -webkit-box-ordinal-group:2;30???????? -moz-box-ordinal-group:2;31???????? margin:0 5px;32???? }33???? #right{34???????? -webkit-box-ordinal-group:2;35???????? -moz-box-ordinal-group:2;36???? }37 </style>38 </head>3940 <body>41 <header>42???? css3三栏布局43 </header>44 <section>45???? <div>46???????? <div id=middle>middle</div>47???????? <div id=left>left</div>48???????? <div id=right>right</div>49???? </div>50 </section>51 </body>52 </html>
googlechrome下运行效果如下：
总结：这里面主要用到了box-flex属性，这个属性主要是让子容器相对于父容器将宽度按一定的规则划分，如三个子容器分别设置box-flex的值为1,2,3则，三个子容器将按照1:2:3的比例划分宽度。
当然，父容器必须设置成为盒子模型才可以看到效果，比如display:-webkit-box;display:-moz-box;
然而，如果你直接运行上面的代码，chrome里面是没有问题，但是到了firefox，则变成下面的样子了：
，难道这是一个firefox的bug？本来左右两边的宽度固定，而中间的却没有自适应宽度。经过与《html5 与css3权威指南》作者的交流，才知道，之所以出现这样的情况是因为没有设置父容器的宽度，当我们给父容器加上width:100%就可以了。。。
优质的Loading Page让你不再厌倦等待
一文看懂社交电商和社区团购怎么做
网站单页面优化的六大方法是什么？
网站为什么需要SEO优化？
网站导航应该怎么设计,网站建设推荐几款网页导航设计
新手如何才能做好SEO优化呢
网络营销策划如何做？做者生不做者死
为什么越来越多的企业都建设官网和小程序？？？
1 <!doctype html>2 <html>3 <head>4 <meta http-equiv=content-type content=text/html; charset=utf-8>5 <title>css3三栏布局</title>6 <style>7???? .container{8???????? display:-webkit-box;9???????? display:-moz-box;10???? }11???? div:not(.container){12???????? -webkit-border-radius:5px;13???????? -moz-border-radius:5px;14???????? border-radius:5px;15???????? background:#999;16???????? border:#00c 2px solid;17???? }1819???? #left,#right{20???????? width:200px;21???????? -webkit-box-sizing:border-box;22???????? -moz-box-sizing:border-box;23???????? padding:20px;24???? }25???? #middle{26???????? padding:20px;27???????? -webkit-box-flex:1;28???????? -moz-box-flex:1;29???????? -webkit-box-ordinal-group:2;30???????? -moz-box-ordinal-group:2;31???????? margin:0 5px;32???? }33???? #right{34???????? -webkit-box-ordinal-group:2;35???????? -moz-box-ordinal-group:2;36???? }37 </style>38 </head>3940 <body>41 <header>42???? css3三栏布局43 </header>44 <section>45???? <div>46???????? <div id=middle>middle</div>47???????? <div id=left>left</div>48???????? <div id=right>right</div>49???? </div>50 </section>51 </body>52 </html>
googlechrome下运行效果如下：
总结：这里面主要用到了box-flex属性，这个属性主要是让子容器相对于父容器将宽度按一定的规则划分，如三个子容器分别设置box-flex的值为1,2,3则，三个子容器将按照1:2:3的比例划分宽度。
当然，父容器必须设置成为盒子模型才可以看到效果，比如display:-webkit-box;display:-moz-box;
然而，如果你直接运行上面的代码，chrome里面是没有问题，但是到了firefox，则变成下面的样子了：
，难道这是一个firefox的bug？本来左右两边的宽度固定，而中间的却没有自适应宽度。经过与《html5 与css3权威指南》作者的交流，才知道，之所以出现这样的情况是因为没有设置父容器的宽度，当我们给父容器加上width:100%就可以了。。。
优质的Loading Page让你不再厌倦等待
一文看懂社交电商和社区团购怎么做
网站单页面优化的六大方法是什么？
网站为什么需要SEO优化？
网站导航应该怎么设计,网站建设推荐几款网页导航设计
新手如何才能做好SEO优化呢
网络营销策划如何做？做者生不做者死
为什么越来越多的企业都建设官网和小程序？？？
上一篇：企业APP打开移动营销新局面