CSS div横向滚动

实际上我们往往会有不想竖直滚动要想一路水平滚动的需求，比如今天在公司里就需要，其实是很简单的，不过对于结构来说，还是需要做一些改动。

<div class="main">
    <div class="img">
        <div class="description">class</div>
    </div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
</div>

就比如说像这样。

然后CSS中我们定义：

        .main {
            height: 100px;
            width: 440px;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
        }

        .img {
            height: 100px;
            width: 100px;
            background: url('img/1.jpg') no-repeat;
            background-size: 100%;
            display: inline-block;
            padding: 0 20px;
        }

在此我们可以看到main中定义了长宽，这是为了让滚动条出现，方便测试，然后overflow-x/y这个就是横纵坐标啦，有三个值：hidden auto以及scroll

在这里，display:inline-blocks可以保证同行，实际上不换行是由white-space:nowrap。如果是float:left，可以实现原来我们所要的效果，但是他会脱离文本流，自动的由于无法浮动而往下跑，不受到white-space的约束，所以只能选择把展示方式改掉。

核心代码差不多就是这些啦。

关于float，可以见：CSS 谈谈浮动与清除浮动(overflow)，今天也被float坑了一把，由于float导致了文字环绕效果，最终用clear:left搞定。