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;