javascript - 使 container-div 宽度适合 float 的 div 子级并允许仅使用 css 进行横向滚动？

Question

我正在尝试使用在容器 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。容器 div 也是可调整大小的；]

是否可以只用 css 做到这一点？我必须使用 javascript 吗？

Answer 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 的地方是行不通的。

您使用内联 block 的想法是正确的，但是您用错了元素。

在你想并排的元素上使用inline-block，然后在它们的父元素上使用white-space: nowrap;来确保它们并排同一条线。