【www.bbyears.com--flex】
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的栅格化系统
代码如下 复制代码...
.col-md-3 { float:left; }
@media (min-width: 992px) {
.col-md-3 { width: 25%; }
/* 父级容器的3/12 */
}
缺点和第一个的float一样，需要根据列数来跳出宽度调整。
例子
代码如下 复制代码
ul.float-ul>li*5>.con>h3{等分标题}+p{等分内容等分内容}
浮动+百分比
等分标题
等分内容等分内容
等分标题
等分内容等分内容
等分标题
等分内容等分内容
等分标题
等分内容等分内容
等分标题
等分内容等分内容
inline-block + 百分比
等分标题
等分内容等分内容
等分标题
等分内容等分内容
等分标题
等分内容等分内容
等分标题
等分内容等分内容
等分标题
等分内容等分内容
table+table-cell
等分标题
等分内容等分内容
等分标题
等分内容等分内容
等分标题
等分内容等分内容
等分标题
等分内容等分内容
等分标题
等分内容等分内容
flex
等分标题
等分内容等分内容
等分标题
等分内容等分内容
等分标题
等分内容等分内容
等分标题
等分内容等分内容
等分标题
等分内容等分内容
<script type="text/javascript">
window.onload = function(){
function setequal(cls){
var a = document.querySelectorAll(cls);
for(var i = 0, l = a.length; i
var child = b.children;
var c = child.length;
for(var j = 0; j
}
}
// var child = a.children;
// for(var i = 0, l = child.length; i
// }
}
// setequal(".J_equalList");
}
</script>
上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中
代码如下 复制代码
header
内容内容
内容内容
内容内容
内容内容
内容内容
内容内容
内容内容
内容内容
内容内容
内容内容
内容内容
内容内容
内容内容
内容内容
footer
总结：
如果需要兼容IE6-IE7的，如果列数固定可以使用第一种和第二种。如果列数不固定，可以加少量js支持。
如果是只考虑移动的，考虑第三种，兼容性比下面的flex支持的比较好。
如果单纯的不考虑低版本浏览器的，可以考虑使用第四种。