Question

我正在尝试使用在容器div中动态加载的内容进行横向滚动布局。身体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吗？

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，则无效。

你有正确的想法使用内联块，但你有错误的元素。

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

Answer 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

将container-div宽度调整为浮动div子项并允许仅使用css进行侧滚动？

2 个答案: