武林網(www.vevb.com)文章簡介:CSS3+HTML5學習筆記四--CSS三欄佈局-寬度只適應.
以前做三欄佈局時,最常用最簡單的方法可能就是:採用float+margin來實現,而CSS3的時代,我們可以有另一種比較時尚的方法,就是css3中的盒子模型,代碼如下:
CSS3三欄佈局Css3三欄佈局middleleftrightGoogleChrome下運行效果如下:
總結:這裡面主要用到了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權威指南》作者……