css 实现等分布局

目前移动版等分布局最常用的是 flex 等分，pc 端上用得更多则是 float。

 

假设父元素下有 3 个子元素，每个子元素相隔 24px，子元素等分父元素宽度

实现：float + margin (inline-block + margin)

// html

<div class="parent">

  <div class="children"></div>

  <div class="children"></div>

  <div class="children"></div>

</div>

 

// css

.parent {

  overflow: hidden;

  margin-right: -24px;

}

.children {

  float: left;  // 不使用 float ，display: inline-block; 

  width: calc(100% / 3 -24px); 

  height: 100px;

  margin-right: 24px;

}