在换行上排列浮动元素答案

【问题标题】：Lining up floating elements on line wrap在换行上排列浮动元素
【发布时间】：2012-09-19 08:10:33
【问题描述】：

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

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

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

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

根据屏幕大小，我想要达到的结果是：

或

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

我用更多细节编辑了我的问题。这个解决方案对我不起作用，因为一行并不总是有 2 个 div。根据 parent-div 的大小，它可能包含 1 个 floating-div 或 3 个 floating-div。标记不能看起来像这样。不过感谢您的帮助！
编辑了我的解决方案。我不明白为什么nth-child不好。我错过了什么吗？
好的，我已经用你的小提琴编辑了我的问题（谢谢你顺便说一句），希望现在更清楚了。
谢谢。最后使用了单独的包装纸。远非优雅，但在我的情况下是一个可以接受的解决方案（并不想为此使用 js）

【解决方案3】：

不确定我是否完全理解您的不同用例，但补充说：

clear:left

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

【讨论】：

我已经用更多细节编辑了我的问题。我无法清除 floating-div-3，因为 parent-div 的大小会根据屏幕大小而变化（因此 floating-div-3 并不总是需要清除的 div）
我最近遇到了同样的问题，并最终在我的 div 上设置了高度，以便它们对齐。我在setting equal column heights via jquery 方面也取得了合理但不完全的成功，但我不知道用纯 CSS 方法来解决这个问题。严格来说，它正在做它应该做的事情。