CSS相对定位不断线

Question

我想要一些 div 的相对定位，有一个外部容器并 float 在 one 行中。

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

这里是代码: (请不要介意语法错误)

<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

如果您在内部 DIV 上设置 display: inline-block; 并在容器上设置 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;
}

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