在线包装上排列浮动元素

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包裹在一个div包装器中，然后它们会像你想要的那样断开。但这也意味着你的包装是一个固定的高度。这种类型的解决方案适用于jQuery，它可以获取第一个内容div的高度，并将其余的包装器div设置为它的高度。

我已更新了jsFiddle，框阴影只是为了显示包装最小高度。

Answer 3

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

clear:left

到#floating-div-3应该在#floating-div-1下压低它。