Javascript 如何阻止右浮动div相互推挤，但仅限于特定区域内？

我几乎可以肯定这个问题会因为之前被殴打致死而被关闭，但我发誓我在这里或谷歌都找不到充分的答案

我有一个HTML页面，其中的宽度被限制为某个最大值。该文本在DIV标记中也有很多相关的图像，这些图像在右侧浮动

我举了一个稍微夸张的例子。现实生活中没有那么多浮动的元素。在任何情况下，包含蓝色边框的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;
}

---

这里

我在JSFIDLE中没有看到

div

s。但是我猜，在

float:right

下面添加

clear:right

应该可以解决您的问题。@Jashwant，哎呀，我无意中链接到了JSFIDLE的早期编辑。它已被更正，我已更新。@Jashwant，我尝试添加

clear:right

，但在现实世界的示例中，它会清除所有内容，因此，有一个google add完全独立于文本，它也会影响div，因此它们会被向下推。有没有办法将

clear

限制在容器DIV内？您可以将

p

和

DIV

包装在

DIV

内，然后清除外部

DIV

@Jashwant，谢谢您的评论。很抱歉，我的澄清使问题有了一点进展，我已经更新了我的问题，希望能更准确地描述这个问题。不过，我不完全理解你最后的评论。你愿意把它扩展成一个答案吗？谢谢你的回答，但最终的结果是P标签和其中的文本之间存在巨大的差距。不幸的是，在我的情况下，这是不可接受的。如果你不希望

p

s之间有任何间隙，那么你只需对

使用
clear:right
。测试
divs。
位置：绝对
到
#容器中，你就可以开始了：）试着把所有必要的东西放在小提琴里，否则你会很困惑你真正想要的是什么。你不会被要求建立你的整个网站，只是让人们找到可靠解决方案的最低限度。我们无法猜测网站的其他部分是什么样子。
#container {
    position: absolute;
}