CSS相对定位不断线

我想要一些div的相对位置，有一个外部容器，漂浮在一条线中

实现这一目标的唯一方法是向左浮动，我想是吧？ 但是如果我这样做，如果元素大于容器的宽度，它将在新的行中打断

代码如下： （请不要介意语法错误）

---

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

或者按照Pete建议的做，或者（因为我注意到你使用了一个

溢出：scroll

规则，我想如果我们在主div中滚动也可以）创建另一个宽度很大的包装器元素，以容纳两个内部元素

小提琴来了：

HTML:

CSS:

#一个{
背景色：红色；
}
#两个{
背景颜色：蓝色；
}
#包装器{
宽度：10000px；
}

在父div上使用空白：nowrap；并对内部div使用display:inline块

<div style="position:relative;width:300px;height:300px;overflow:scroll;white-space: nowrap">
    <div id="1" style="display:inline-block; width:200px;height:50px;float:left;"></div>
    <div id="2" style="display:inline-block;width:200px;height:50px;float:left;"></div>
</div>

---

如果设置

显示：内联块和
空白：nowrap在容器上，我相信它会达到预期效果

HTML



CSS

div.relative{
位置：相对位置；
宽度：300px；
高度：300px；
溢出：滚动；
空白：nowrap；
}
一区，二区{
显示：内联块；
宽度：200px；
高度：50px；
}

彩色演示结果。
将内部容器的宽度更改为50%或将外部容器的宽度增加到400pxI同意@Pete最合理的解决方案是使内部容器流动，以便它们可以缩放到容器的宽度。不过，也就是说，容器元素是如何获得其宽度属性的？您是在设置它，还是根据其他一些规则/参数动态生成它？这是最接近我需要的。但是我不想有一个10000像素的静态包装器。。。它应该调整到所有内部元素的大小，我还将添加
空白：正常到内部分区正是我想要的：）ty
<div style="position:relative;width:300px;height:300px;overflow:scroll;white-space: nowrap">
    <div id="1" style="display:inline-block; width:200px;height:50px;float:left;"></div>
    <div id="2" style="display:inline-block;width:200px;height:50px;float:left;"></div>
</div>