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

使用场景

在移动端屏幕宽度有限的前提下,使用横向滚动的方式展现更多的内容。在这样的需求下,但愿父元素做为容器,其宽度能够又横向排列资源的总宽度动态撑开,超过祖父元素的宽度;在不超过祖父元素时,自动继承100%的宽度。css

DOM结构以下:spa

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

  • 设置父元素的属性code

    white-space: nowrap;
    display: inline-block;
  • 设置子元素的属性继承

    display: inline-block;
相关文章
相关标签/搜索