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處理方法

• 設置父元素的屬性

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

• 設置子元素的屬性

  display: inline-block;