等分布局就是指一行被分为若干列，每一列的宽度是相同的值
实现方式一：
float属性实现等分布局
<div class="parent"> <div class="col1"></div> <div class="col2"></div> <div class="col3"></div> <div class="col4"></div> </div>
.col1,.col2,.col3,.col4{ height:300px; width:25%; float:left; } .col1{ background:red; } .col2{ background:#ccc; } .col3{ background:orange; } .col4{ background:yellow; }
实现方式二：display属性的值关于table实现
.parent{ display:table; width:100%; } .col1,.col2,.col3,.col4{ height:300px; display:table-cell; } .col1{ background:red; } .col2{ background:#ccc; } .col3{ background:orange; } .col4{ background:yellow; }
等分布局实现空白间距的情况
方法一：
<div class="parent-fix"> <div class="parent"> <div class="col1"><div class="inner"></div></div> <div class="col2"><div class="inner"></div></div>
<div class="col3"><div class="inner"></div></div>
<div class="col4"><div class="inner"></div></div>
</div>
</div>
.parent-fix{ overflow:hidden; } .parent{ height:300px; margin-left:-10px; } .col1,.col2,.col3,.col4{ height:300px; width:25%; float:left; padding-left:10px; box-sizing:border-box; } .inner{ height:300px; } .col1 .inner{ background:red; } .col2 .inner{ background:#ccc; } .col3 .inner{ background:orange; } .col4 .inner{ background:yellow; }
方法二：
.parent-fix{ overflow:hidden; } .parent{ display:table; width:1434px; /*根据屏幕决定*/ margin-left:-10px; } .col1,.col2,.col3,.col4{ height:300px; display:table-cell; box-sizing:border-box; padding-left:10px; } .inner{ height:300px; } .col1 .inner{ background:red; } .col2 .inner{ background:#ccc; } .col3 .inner{ background:orange; } .col4 .inner{ background:yellow; }
原文：https://www.cnblogs.com/qjb2404/p/12411177.html