html - 如何将行水平保持在同一行？

这个问题已经有了答案：
Floated elements of variable height push siblings down
3个答案
这是我的代码：

div{
    float: left;
    width: 30.33%;
    min-width: 150px;
    padding: 6px;
}

<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever
    </p>
</div>

看到了吗？一切都井然有序。一切都好。但当一个盒子的高度超过其他盒子时，这些行就会交织在一起（杂乱无章）。见：

div{
    float: left;
    width: 30.33%;
    min-width: 150px;
    padding: 6px;
}

<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever   whatever   whatever   whatever   whatever   whatever   whatever
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever
    </p>
</div>

我怎样才能使行保持同一行？

最佳答案

您可以使用FlexBox：

.wrapper div {
  width: 30.33%;
  min-width: 150px;
  padding: 6px;
}
.wrapper{
display: flex;
flex-wrap:wrap;
}

<div class="wrapper">
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
</div>

关于html - 如何将行水平保持在同一行？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50326331/