css - 碰撞时在另一个容器中制作一个 float div shift div

Question

两列的盒子，有时左列的盒子可能比列大，必须向下移动右列的盒子以避免碰撞。可以包含或不包含右列或左列的框，但我不知道更大框的#。任何东西都可以是 float 的、 block 状的或内联的等等。

I have this:

I want this:

仅使用 CSS 是否可能以某种方式实现？

JSFiddle (第一张截图)

谢谢!

Answer 1

明白了!将 greens 设置为 inline-block 并将 float: left 设置为 blues(而不是他们的 parent )按预期工作。没有 JS ;)

JSFiddle (我在尝试中颠倒了蓝色和绿色)