CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度

发表于 | 更新于 | 分类于

使用场景

在移动端屏幕宽度有限的前提下，使用横向滚动的方式展示更多的内容。在这样的需求下，希望父元素作为容器，其宽度可以又横向排列资源的总宽度动态撑开，超过祖父元素的宽度；在不超过祖父元素时，自动继承100%的宽度。

DOM结构如下：

1
2
3
4
5
6
7
8
9
<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处理方法

  • 设置父元素的属性
1
2
white-space: nowrap;
display: inline-block;
  • 设置子元素的属性
1
display: inline-block;