CSS Divs 浮动“卡片”包裹起来

Question

我有一个基本的场景设置，我试图将 div 浮动在包装内。它工作得很好，但是当 div 具有可变高度时，我试图实现的简单效果并不配合。我对此进行了研究，尝试对第三张卡应用清除修复，但没有成功。我所取得的唯一成功实际上是在第三张卡之后注入另一个 div，其风格均为清晰。然而，这不是我想要采取的方法，因为我不想更改任何干净的标记。关于完成这项工作的最佳方法的想法？如有必要，我不介意使用一些简单的 JS/jQuery。

所需：

当前： http://andrewherrick.com/spike/floatcards/

Answer 1

也许我不明白这个问题，但你不能简单地在第四张卡上添加一个“明确：两者”吗？

Answer 2

解决方案 1：

使用 .card:nth-child(3n+1) 将 clear: Both 添加到 3n+1 元素{clear: Both } 或在需要时手动添加类。

解决方案 2：

使用 display: inline-block; 代替 .card 上的 float: left垂直对齐：顶部。您还需要将 margin-right 减少到 16px。

如果需要支持IE7，则display: inline-block需要为display:inline-block; *显示：内嵌；缩放：1。

Answer 3

您必须以某种方式定义“行”。您可以为每个 div 设置相同的高度（从而设置 row-height），或者您可以放置​​一个空高度分隔符，或者您可以为从第一个 div 开始的每个第三个 div 设置 clear:left 。

Answer 4

使用 nth-child 选择器设置的 clear:both 就是您所追求的。

您可以使用带有 jQ​​uery 的 nth-child 选择器来动态添加类，对于本​​机不支持它的旧版浏览器：http://api.jquery.com/nth-child-selector/

Answer 5

使用 :nth-child 选择器与 clear:both 结合使用。以下将清除每三张牌。由于您使用的是固定宽度（910px），因此这将可靠地工作。

.card:nth-child(3n+1) {
  clear: both;
}

只需将规则添加到现有 CSS 中即可。在 Firefox、Chrome 和 IE 中测试：jsfiddle

Answer 6

解决方案 1

如果您真的不愿意修改标记，您可以使用一些 jQuery（感谢您的提示）：

Jquery

$('.card:nth-child(3n+1)').css('clear','left');

---

Solution 2

只需稍微改变一下 HTML，它可能会更干净（并且向后兼容）。
也许将每一行包装在自己的包装器中，并对其应用clearfix。

jsfiddle: http://jsfiddle.net/leifparker/sh4fR/

您需要添加 ' clearfix' CSS 代码。见小提琴。

HTML

<div id="wrap">
    <div class="cards clearfix">
        <div class="card">
            1 text text text text text text text text text text text text text text text text
            text text text text text text text text text text
        </div>
        <div class="card">
            2 text text text text text text text text text text text text text text text text
            text text text text text text text text text text
        </div>
        <div class="card">
            3 text text text text text text text text text text text text text text text text
        </div>
    </div>
    <div class="cards clearfix">
        <div class="card">
            4 text text text text text text text text text text text text text text text text
            text text text text text text text text text text
        </div>
        <div class="card">
            5 text text text text text text text text text text text text text text text text
        </div>
        <div class="card">
            6 text text text text text text text text text text text text text text text text
        </div>
    </div>