CSS 相对定位不断线

Question

我想有一些div的相对定位，具有外容器，并漂浮在一个线。

实现这一目标的唯一方法是向左浮动，我认为对吗？但是如果我这样做，如果元素大于容器宽度，它会换行...

这里的代码：（请不要介意语法错误）

<div style="position:relative;width:300px;height:300px;overflow:scroll">
 <div id="1" style="position:relative;width:200px;height:50px;float:left;"></div>
 <div id="2" style="position:relative;width:200px;height:50px;float:left;"></div>
</div>

id 为 2 的 Div 将换行...如何避免这种情况？

Answer 1

如果您display: inline-block;在内部 DIV 和white-space: nowrap;容器上设置，我相信它会产生预期的效果......

HTML

<div class="relative">
    <div id="one"></div><div id="two"></div>
</div>

CSS

div.relative {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: scroll;
    white-space: nowrap;
}

div#one, div#two {
    display: inline-block;
    width: 200px;
    height: 50px;
}

这个 jsFiddle丰富多彩地展示了结果。