使容器 div 宽度适合浮动 div 子项并允许仅使用 css 进行横向滚动？答案

【问题标题】：Fit container-div width to floated div children and allow side-scrolling with only css?使容器 div 宽度适合浮动 div 子项并允许仅使用 css 进行横向滚动？
【发布时间】：2013-06-26 02:25:47
【问题描述】：

我正在尝试使用在容器 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>

我基本上需要让fiddle 工作，以便内部 div 并排，从左到右滚动，并且可以有任意数量。容器 div 也可以调整大小；]

是否可以仅使用 css 来执行此操作？我必须使用javascript吗？

【问题讨论】：

喜欢这个？ stackoverflow.com/questions/6690302/…

标签： javascript css css-float

【解决方案1】：

http://jsfiddle.net/zepva/1/

#simulating_body {
    width: 98%;
    border: 3px solid #222;
}

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

.inner{
    display: inline-block;

}

一些提示：你不能多次使用一个 ID，所以你在两个内部 div 上有 #inner 的地方，这是行不通的。

您使用 inline-block 的想法是正确的，但您在错误的元素上使用了它。

在要并排的元素上使用inline-block，然后在它们的父元素上使用white-space: nowrap;，以确保它们在同一行。

【讨论】：

啊，天才！非常感谢！
浮点数和内联块在有填充时都会失败。可滚动内容（所有子元素在父元素内作为单个页面滚动）无法计算宽度，因此一大块留在可见区域之外，其宽度等于子元素所有填充的总和。拨弄stackoverflow.com/q/23976017/595488

【解决方案2】：

我怀疑你可以用浮点数做到这一点，但 display: inline-block 应该可以工作：

HTML

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

CSS

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

这是一个 jsbin：http://jsbin.com/uguhiz/1/edit

【讨论】：