CSS佈局技巧 -- 純CSS讓子元素的寬度總和決定其父元素的寬度

使用場景

在移動端屏幕寬度有限的前提下，使用橫向滾動的方式展示更多的內容。在這樣的需求下，希望父元素作爲容器，其寬度可以又橫向排列資源的總寬度動態撐開，超過祖父元素的寬度；在不超過祖父元素時，自動繼承100%的寬度。

DOM結構如下：

  <div class="grantparent">
        <div class="parent">
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </div>

一般處理方法

• 將子元素設爲float或者inline-block，然後再通過js計算子元素的個數和其寬度，從而設置父元素的寬度 不利因素 增加DOM操作

• js重新設定屬性增加渲染重繪次數 float在渲染時計算量比較大

純CSS處理方法

• 設置父元素的屬性
  width：不設置

white-space: nowrap;
display: inline-block;

• 設置子元素的屬性

display: inline-block;