Javascript 是否将容器div宽度调整为浮动div子项，并允许仅使用css进行侧滚？

我正在尝试使用容器div中动态加载的内容制作一个侧面滚动布局。body div中的子div向左浮动，可以是任意宽度

<div id="container" style="overflow-y:hidden, overflow-x:scroll">
    <div style="float: left">Lots of images and text</div>
    <div style="float: left">More images and text</div>
    <div style="float: left">Even more</div>
</div>

大量的图像和文本
更多图像和文本
甚至更多

我基本上需要这样做，以便内部div并排，从左向右滚动，并且可以有任意数量的div。容器div也可以调整大小；]

是否可以只使用css来实现这一点？我必须使用javascript吗？

一些提示：不能多次使用ID，因此在两个内部div上有

#internal

的地方，这是行不通的

您使用内联块的想法是正确的，但在错误的元素上使用了它

---

对要并排放置的元素使用

内联块

，然后使用

空白：nowrap，以确保它们位于同一行。
我怀疑您是否可以使用浮点数进行此操作，但是
display:inline block
应该可以：

HTML

这里有一个jsbin:
像这样吗？啊，天才！非常感谢！当浮动块和内联块都有填充时，它们都会失败。可滚动内容（所有子元素作为父元素内部滚动的单个页面）无法计算宽度，因此可见区域外仍有一大块内容，其宽度等于子元素所有填充的总和。摆弄
#simulating_body {
    width: 98%;
    border: 3px solid #222;
}

#middle {
    overflow: auto;
    white-space: nowrap;
}

.inner{
    display: inline-block;

}

<div id="container">
    <div>Lots of images and text</div>
    <div>More images and text</div>
    <div>Even more</div>
</div>

#container {
    white-space: nowrap;
    max-width: 100px;
    overflow-x: auto;
}
div {
    white-space: nowrap;
    display: inline-block;
}