标签：
在实际网页布局中，我们可能会需要设置等分布局。
<div class="parent"> <div class="column"><p>1</p></div> <div class="column"><p>2</p></div> <div class="column"><p>3</p></div> <div class="column"><p>4</p></div> </div>
可以采用以下办法：
方案1：float
.parent{
margin-left:-20px; //给父元素增加宽度
}
.column{
float:left;
width:25%;
padding-left:20px;
box-sizing:border-box;
}
缺点：1.如果等分分数不一样的话，需要重新设置。
2.ie67对百分比浮点数直接四舍五入。
方案2：table
改造HTML：
<div class="parent-fix"> <div class="parent"> <div class="column"><p>1</p></div> <div class="column"><p>2</p></div> <div class="column"><p>3</p></div> <div class="column"><p>4</p></div> </div> </div>
css：
.parent-fix{
margin-left:-20px; //补充宽度
}
.parent{
display:table;
width:100%;
table-layout:fixed;
}
.column{
display:table-cell;
padding-left:20px;
}
方案3：flex
.parent{
display:flex;
}
.column{
flex:1; //分margin后的剩余空间
}
.column+.column{ //除了第一个column元素外的后几个column元素
margin-left:20px;
}
缺点：兼容性问题
总结：选择器特性及兼容性
选择器相关知识：http://www.w3school.com.cn/cssref/css_selectors.asp
附加等高布局：
方案1:将left、right设为table元素；
方案2：flex的align-items的默认值是stretch
方案3：float(伪等高) 兼容性较好
加上.left,.right{padding-bottom:9999px;margin-bottom:-9999px;}及.parent{overflow:hidden}
标签：
原文地址：http://www.cnblogs.com/july-Vivian/p/4614851.html
