javascript - 如何阻止右浮动 DIV 相互插入，但仅限于特定区域内？

Question

我几乎可以肯定这个问题会因为之前被打死而被关闭，但我发誓我无法在这里或通过谷歌找到足够的答案。

我有一个 HTML 页面，其中宽度被限制为某个最大值。此文本在 DIV 标签中也有很多关联的图像，它们沿右侧 float 。

我做了一个例子JSFiddle这有点夸张。现实生活中并没有那么多 float 元素。在任何情况下，包含蓝色边框的 DIV 越接近最大宽度，红色边框 DIV 之间的垂直距离就不够高，并且较低的 DIV 会被推到左侧。

所以，我尝试将 clear: right; 添加到 DIV 中，但随后又出现了一个问题，即它们相对于一切，包括包含 DIV 之外的元素。容器外的绿色边框 DIV 将红色边框的 DIV 向下推，这是不希望的。

有没有办法强制红色边框的 DIV 移动到它们上方的 DIV 下方，并将效果限制在包含蓝色的 DIV 内，以便绿色边框的 DIV 不会将红色边框的 DIV 向下推？我对涉及 Javascript 的解决方案持开放态度，尽管纯 CSS 是理想的。

这是 CSS:

#otherthing {
    height: 300px;
    width: 80px;
    border: green thin solid;
    float: right;
}

#container {
 max-width: 36em;
    border: blue thin solid;
}

.test {
    border: red thin solid;
    float: right;
    clear: right;
    height: 180px;
    width:60px;
}

Answer 1

#container {
    position: absolute;
}

FIDDLE 这里