左右兩側(cè)按1:1自適應(yīng),中間固定寬度500px

// CSS /* 首先定義 container ，關(guān)注display */ /* webkit 是Chrome、Safari 的瀏覽器前綴 */ .container{margin: auto;display: -webkit-box;width: 80%；height: 200px; } /* 開(kāi)始定義左、中、右 */ .left { -webkit-box-flex: 1; border: 1px dashed black;} .main {width: 500px; border: 1px dashed black;} .right {-webkit-box-flex: 1; border: 1px dashed black;}// HTML <div class="container"><div class="left"></div><div class="main"></div><div class="right"></div> </div>

很多時(shí)候,瀏覽器可能不支持彈性盒子(如:Opera 和 IE 9及之前版本).我們可以編寫(xiě)兼容性代碼如下:

.father{display: -webkit-box; /* Chrome 和 Safari */display: -o-box; /* Opera */display: -moz-box; /* FireFox */display: -ms-box; /* IE */display: box; } .son_content{-webkit-box-flex: 4; -o-box-flex: 4;-moz-box-flex: 4;-ms-box-flex: 4;box-flex: 4; }

我們希望,布局能縱向布局,代碼如下: (ps:只用改變container,慢慢體會(huì))

// CSS .container{margin: 30px;display: -web-box;-moz-box-orient: block-axis;-webkit-box-orient: block-axis;-o-box-orient: block-axis;box-orient: block-axis;width: 800px;heigth: 500px; }

效果如下:

參考《CSS高效開(kāi)發(fā)實(shí)戰(zhàn)》 P105~P108

總結(jié)

以上是生活随笔為你收集整理的css --- 弹性盒子的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。