CSS等分布局方法
阿新 • • 發佈:2018-02-13
例如 ace nor idt link zoom 支持ie 列數 wid
原文鏈接:http://caibaojian.com/css-equal-layout.html
CSS等比例劃分,在CSS布局中是比較重要的,下面分享幾種常用方法和探討一下兼容性。
一:浮動布局+百分比
emmet html代碼:ul.float-ul>li*5>.con>h3{等分標題}+p{等分內容等分內容}
.float-ul{width: 100%; overflow: hidden; zoom: 1;}
.float-ul li{float: left; width: 20%;}
該樣式兼容性較好,但是無法實現當裏面的列增多時比例也隨著變化,必須手動修改,當然你也可以使用一個js來調整了。
二:行內元素(inline-block)+百分比
參考之前寫過的inline-block替換float的代碼,使用該樣式還可以實現布局居中等塊級元素所具有的特性。
.inline-ul{font-size: 0; *word-spacing: -1px;}
.inline-ul li{display: inline-block; *display: inline; *zoom: 1; font-size: 14px; vertical-align: top; word-spacing: normal; letter-spacing: normal; width: 20%;}
@media screen and (-webkit-min-device-pixel-ratio:0){
.inline-ul{letter-spacing: -5px;}
}
三:display:table + display:table-cell
我們知道表格可以根據內容進行劃分,CSS也有一個樣式是display:table來實現類似表格的布局,不過不支持IE8以下瀏覽器。
.table-cell{display: table; width: 100%;}
.table-cell li{display: table-cell;}
四:使用css3 display:flex.
舊語法:·
.flex-ul{display: -webkit-box; display: box;}
.flex-ul li{-webkit-box-flex:1; box-flex:1;}
新語法:
.flex-ul{display:-webkit-flex; display: flex; width: 100%;}
.flex-ul li{-webkit-flex:1; flex:1;}
該方法只適用於高級瀏覽器,IE10以下的還是算了。具體介紹
五:使用柵格化系統
例如Bootstrap的柵格化系統
//code from http://caibaojian.com/css-equal-layout.html
<div class="container">
<div class="row">
<div class="col-md-3"></div>
...
</div>
</div>
.col-md-3 { float:left; }
@media (min-width: 992px) {
.col-md-3 { width: 25%; }
/* 父級容器的3/12 */
}
缺點和第一個的float一樣,需要根據列數來跳出寬度調整。
總結:
如果需要兼容IE6-IE7的,如果列數固定可以使用第一種和第二種。如果列數不固定,可以加少量js支持。
如果是只考慮移動的,考慮第三種,兼容性比下面的flex支持的比較好。
如果單純的不考慮低版本瀏覽器的,可以考慮使用第四種。
CSS等分布局方法