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;

}