Question

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

所需：

enter image description here

电流： http://andrewherrick.com/spike/floatcards/

Answer 1

也许我不理解这个问题，但你不能简单地在第四张卡片上添加“clear：both”吗？

Answer 2

解决方案1：

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

解决方案2：

而不是float: left上的.card，请使用display: inline-block; vertical-align: top。您还需要将margin-right缩减为16px。

如果您需要支持IE7，则display: inline-block必须为display:inline-block; *display:inline; zoom:1。

Answer 3

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

Answer 4

解决方案1 

如果你真的不喜欢触摸你的标记，你可以使用一些jQuery（感谢thirtydot提示）：

<强> Jquery的

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

<小时/> 解决方案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>

Answer 5

使用clear:both选择器设置的

nth-child就是你想要的。

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

Answer 6

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

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

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

CSS Divs在Wrap中浮动“卡片”

6 个答案: