【技巧】怎么横向撑开父节点

背景：父节点需要固定宽度，子节点长度不定，父节点overflow-x:scroll;
解决方案：
- 1、js动态计算出子节点的宽度
- 2、方法1显得是有点冗余了，正确的打开方式

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .content{
            width:300px;
            overflow-x:scroll;
        }
        .con{
            white-space: nowrap;
            width: auto;
        }
        .a{
            width: 200px;
            height: 200px;
            background: #f00;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="con">
            <div class="a"></div>
            <div class="a"></div>
            <div class="a"></div>
            <div class="a"></div>
            <div class="a"></div>
            <div class="a"></div>
            <div class="a"></div>
            <div class="a"></div>
            <div class="a"></div>
            <div class="a"></div>
        </div>
    </div>
</body>
</html>

原理：
关键在于：white-space: nowrap;
这个样式的作用常用于让文字不要换行。
这边这样写，就是使子元素中的元素都是inline的状态，然后使其不换行，撑开父节点，这样就能免于js的计算。
兼容性目前没有大面积测过，用过的几个场景暂时没有问题。

【技巧】怎么横向撑开父节点

推荐阅读更多精彩内容