1

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

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

4

2 回答 2

2

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

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

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

.inner{
    display: inline-block;

}

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

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

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

于 2013-06-26T02:33:50.507 回答
0

我怀疑你可以用花车做到这一点，但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

于 2013-06-26T02:35:37.767 回答