以前做三欄布局時(shí)，最常用最簡(jiǎn)單的方法可能就是：采用float+margin來(lái)實(shí)現(xiàn)，而CSS3的時(shí)代，我們可以有另一種比較“時(shí)尚”的方法,就是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 } 18 19 #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> 39 40 <body> 41 <header> 42 Css3三欄布局 43 </header> 44 <section> 45 <div class="container"> 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下運(yùn)行效果如下：
總結(jié)：這里面主要用到了box-flex屬性，這個(gè)屬性主要是讓子容器相對(duì)于父容器將寬度按一定的規(guī)則劃分，如三個(gè)子容器分別設(shè)置box-flex的值為1,2,3則，三個(gè)子容器將按照1:2:3的比例劃分寬度。
當(dāng)然，父容器必須設(shè)置成為盒子模型才可以看到效果，比如display:-webkit-box;display:-moz-box;
然而，如果你直接運(yùn)行上面的代碼，chrome里面是沒(méi)有問(wèn)題，但是到了FireFox，則變成下面的樣子了：
，難道這是一個(gè)FireFox的Bug？本來(lái)左右兩邊的寬度固定，而中間的卻沒(méi)有自適應(yīng)寬度。經(jīng)過(guò)與《html5 與css3權(quán)威指南》作者的交流，才知道，之所以出現(xiàn)這樣的情況是因?yàn)闆](méi)有設(shè)置父容器的寬度，當(dāng)我們給父容器加上width:100%就可以了。。。在此感謝《html5 與css3權(quán)威指南》作者……
渝公網(wǎng)安備 50024202000196號(hào)
域名注冊(cè)知識(shí)
虛擬主機(jī)知識(shí)
網(wǎng)站建設(shè)知識(shí)
網(wǎng)絡(luò)推廣知識(shí)
網(wǎng)絡(luò)營(yíng)銷知識(shí)
常見技術(shù)問(wèn)題
QQ空間
新浪微博
開心網(wǎng)
人人網(wǎng)