Javascript 如何设置具有内部浮动的div的样式，使其水平扩展以允许所有内部浮动div都适合？

基本上，我有一个包含一些浮动项的内容框：

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>

我希望长方体在宽度上扩展，以便在添加到长方体中时可以容纳尽可能多的项目，向左浮动（这意味着元素被推到右侧）。但是，由于没有空间，它只会在项目落下之前与页面一样宽。我希望它在页面外部继续

我该怎么做

---

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

您可以在具有内联块子元素的父容器上使用

空白：nowrap

：

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

演示：

$（“按钮”）。单击（函数（）{
$（'.contentBox'）.append（''+（$（'.item'）.length+1）+''；
});
.contentBox{
溢出-x：滚动；
空白：nowrap；
}
.项目{
宽度：50px；
背景：珊瑚；
右边距：5px；
显示：内联块；
}

1.
2.
3.
4.
添加更多内容
您可以为
项目设置
显示：表格单元格

这里有一个例子：
给你：）
仅在您的按钮上添加此按钮单击

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

   var w = window.innerWidth;
   var l = $(".contentBox div").length + 1;
   $(".contentBox div").each(function(){
        $(this).css("width", w/l);
   });
});

$（“按钮”）。单击（函数（）{
变量项=$（'.item'）。长度+1；
$（'.contentBox'）.append（''+项+''）；
var w=窗内宽度；
var l=$（“.contentBox div”）.length+1；
$（“.contentBox div”）。每个（函数（）{
$（此）.css（“宽度”，w/l）；
});
});

检查此JSFIDLE链接
您可能需要
display:table
和
display:table cell
嗯，一种解决方案是使用
display:inline block
而不是
float
并添加
空白：nowrap
到父元素-@AndrewDunai我刚刚尝试将
display:table
添加到父元素，并将
display:table cell
添加到项目中，但这似乎不起作用，你能演示一下吗？
$('button').click(function() {
  var item = $('.item').length + 1;
   $('.contentBox').append('<div class="item">' + item + '</div>');

   var w = window.innerWidth;
   var l = $(".contentBox div").length + 1;
   $(".contentBox div").each(function(){
        $(this).css("width", w/l);
   });
});