碰撞时在另一个容器中制作一个浮动div shift div

Question

两列方框，有时候，左列方框可能比列大，并且必须向下移动rigth-column框以避免碰撞。 可以包含或不包含右列或左列的框，但我不知道更大框的＃。任何东西都可以浮动，阻止或内联等。

I have this:

I want this:

这只能用CSS来实现吗？

JSFiddle（第一次截图）

谢谢！

Answer 1

知道了！将布鲁斯（而不是他们的父母）的绿色设置为inline-block和float: left按预期工作。没有JS;）

JSFiddle（在我的尝试中，我倒蓝绿色）