如何在固定宽度DIV中获取浮动DIV以水平继续？

Question

我有一个高度和宽度固定的容器DIV(275x1000px).在这个DIV中,我想放置多个浮动DIV,每个DIV的宽度为300px,并且有一个水平(x轴)滚动条,允许用户左右滚动查看所有内容.

到目前为止这是我的CSS:

div#container {
    height: 275px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 275px;
}

div#container div.block {
    float: left;
    margin: 3px 90px 0 3px;
}

问题是浮动DIV不会继续超过容器的宽度.在放置三个浮动DIV后,它们将继续在下方.如果我将overflow-y更改为auto,则会出现垂直滚动条,我可以向下滚动.

如何更改此设置以使浮动DIV继续运行而不会相互低于？

Answer 1

div#container {
    height: 275px;
    width: 1000px;
    overflow: auto;
    white-space: nowrap;
}

div#container span.block {
    width: 300px;
    display: inline-block;
}

这里的技巧只是在Internet Explorer中设置为内联块时,默认情况下行为为内联的元素才会正常运行,因此内部容器需要<span>而不是<div>.

Answer 2

你需要一个宽大的额外div来包含块,然后它们将比容器div扩展得更宽,而不是下降到一个新行.

HTML:

<div id="container">
    <div id="width">
        <div class="block">
            <!-- contents of block -->
        </div>
        <div class="block">
            <!-- contents of block -->
        </div>
        <div class="block">
            <!-- contents of block -->
        </div>
        <!-- more blocks here -->
    </div>
</div>

CSS:

#container {
    height: 275px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 275px;
}
#container #width {
    width:2000px; /* make this the width you need for x number of blocks */
}
#container div.block {
    float: left;
    margin: 3px 90px 0 3px;
}

Answer 3

#row {
    white-space: nowrap; /* important */
    overflow: auto;
}

.items {
    display: inline-block;
}

<div id="row">
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 1" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 2" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 3" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 4" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 5" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 6" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 7" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 8" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 9" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 10" />
    </div>
</div>

这里的诀窍是父级的"white-space:nowrap"属性,它只是告诉所有它的子元素水平继续,以及它的子节点的"display:inline-block"属性.您无需添加任何其他属性即可使其工作.

JS小提琴:http://jsfiddle.net/2c4jfetf/