html - 在换行上排列浮动元素

Question

我有以下设置：http: //jsfiddle.net/GdDhT/

当浮动div的行换行时，第二行的第一个不是我想要的（因为它上面的div的大小）

我不能像这样添加一个清除 div：

因为当屏幕变大时，#floating-div-1, 2 和 3 会并排出现在一行中。出于同样的原因，我无法在特定的 div 上添加清除。:nth-child css 规则也有同样的问题。

这是响应式设计的一部分，所以我不能依赖精确的宽度计算，因为 div 的大小会有所不同。

根据屏幕尺寸，我想要达到的结果是：

或者

Answer 1

第 n 个孩子可能会帮助你 - 让每一行的第一个 div 清楚它是剩下的：

#parent-div div:nth-child(2n-1){
    clear: left;
}

jsfiddle：http: //jsfiddle.net/k5DXN/1/

Answer 2

将您的每个 div 包装在具有 min-height 的 div 包装器中，然后它们会像您想要的那样破裂。但这也意味着您的包装器是固定高度。这种类型的解决方案适用于 jQuery，它可以获取第一个内容 div 的高度并将包装器 div 的其余部分设置为它的高度。

我已经更新了jsFiddle， box-shadow 只是为了显示包装的最小高度。

Answer 3

不确定我是否完全理解您的不同用例，但添加：

clear:left

应该把#floating-div-3它撞到下面#floating-div-1。