javascript - 如何设计带有内部 float 的 div 以水平扩展以允许所有内部 float div 适合？

Question

基本上，我有一个包含一些 float 元素的内容框:

html

<div class="contentBox">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

CSS

.contentBox {
    overflow-x:scroll;
}
.item {
    float:left;
}

我希望盒子的宽度扩大，以便让我添加到其中的元素尽可能多地适应，向左浮动(这意味着元素被推到右边)。但相反，由于没有空间，它只会在元素下降之前与页面一样宽。我希望它在页面外继续。

我该怎么做？

我想我需要使用一些 JavaScript，但如果可能的话，我宁愿使用纯 CSS 解决方案。

Answer 1

您可以在带有内联 block 子元素的父容器上使用 white-space: nowrap:

.contentBox {
    overflow-x: scroll;
    white-space: nowrap;
}
.item {
    display: inline-block;
}

演示:http://jsfiddle.net/vo8202uy/

$('button').click(function() {
    $('.contentBox').append('<div class="item">' + ($('.item').length+1) + '</div>');
});

.contentBox {
    overflow-x:scroll;
    white-space: nowrap;
}
.item {
    width: 50px;
    background: coral;
    margin-right: 5px;
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contentBox">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>
<button>Add more</button>