由于高度差异，3列布局不会向左浮动。

Question

我在我创建的一些专栏中遇到了问题，我只是无法理解导致它的原因。现在的情况如下：

​

我的代码(简化版本)：

<div class="wrapper">
    <div class="col-4 tall">1</div>
    <div class="col-4 very-tall">2</div>
    <div class="col-4 medium">3</div>
    <div class="col-4 tall">Why can't I be under nr 1?</div>
    <div class="col-4 tall">5</div>
    <div class="col-4 small">6</div>
</div>

CSS：

.wrapper {
    width: 600px;
    margin: 0 auto;
}

.col-4 {
    float: left;
    display: inline;
    margin-left: 1.31578947%;
    margin-right: 1.31578947%;
    width: 30.7017544%;
}

这是我的代码的小提琴。

所以，my problem：我想在“如何训练你的龙2”下，用“可鄙的我”这个盒子向左排列。如果前三列有固定的高度，那么它可以正常工作，但我不希望这样，我希望根据内容展开列的高度。

Answer 1

你看到的行为是意料之中的。如果您想要脱离预期的行为，我认为您需要一个三列布局，而不是在所有子列上留下一个浮点的div。

<div class="wrapper">
    <div class="col-1"> . . . </div> 
    <div class="col-2"> . . . </div>
    <div class="col-3"> . . . </div>
</div>

您还可以使用上述注释中提到的砌体。