Question

嗨所以我想使用float和clear来制作基于列的网格（双列）。

这个想法是给左块一个浮点数：左边和清除：左边，给右边一个浮动：右边和清楚：右边。

.left-block {
    float: left;
    clear: left;
}
.right-block {
    float: right;
    clear: right;
}

但事实证明这不起作用。你能告诉我为什么这不起作用吗？

Jsfiddle link

为什么这个one工作得很完美。

Answer 1

浮动元素不可能超越另一侧的前一个元素（因为它已被清除）。因此，只有使用浮动才能获得正确的堆叠效果。

为了进一步了解浮动和清算的详细工作方式，我建议您阅读specification。

到目前为止，没有额外容器的砌体布局的唯一方法是使用CSS列。您可以找到示例here。

Answer 2

我只是为您正在制作的div制作浮动，并在包含容器上添加清除，以便阻止它。这是未经测试的，但我希望它有效。

CSS：

.wrapper {
    width: 70%;
}

.wrapperClear {
    content: "";
    display: table;
    clear: both;
}

.left-block {
    float: left;
    width: 50%;
}

.right-block {
    float: right;
    width: 50%;
}

HTML：

<div class="wrapper wrapperClear">
    <div class="left-block"></div>
    <div class="right-block"></div>
</div>

基于列的网格（如masonry.js）使用float和clear

2 个答案: