html - 在达到父 div 高度后并排显示 div

Question

我有一个 div，它将由 n 个 div 组成

<div class="wrapper">
    <div class="parent">
        <div class="child"> top left     </div>
        <div class="child"> mid left     </div>
        <div class="child"> bottom left  </div>
        <div class="child"> top right    </div>
        <div class="child"> mid right    </div>
        <div class="child"> bottom right </div>
    </div>
</div>

我想通过为包装器或父级保留一些 max-height 来并排显示它们。

示例:前三个 child 将作为第一列，接下来的三个将作为第二列，最后一个将作为第三列。

我尝试了一切display: inline-block, float: left, padding, max-height 但是没有一个工作。

Answer 1

.wrapper {
width: 100%;
}

.child {
width: 33%;
float: left;
}