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来并排显示它们。

示例：前三个孩子将作为第一列，接下来三个将是第二列，最后一个将在第三列。

我尝试了所有内容display: inline-block，float: left，padding，max-height，但都没有效果。

Answer 1

HTML

    <div class="wrapper">
        <div class="parent">
<div class="col">
            <div class="child">one</div>
            <div class="child">cas</div>
            <div class="child">asds</div>
</div>
<div class="col">
            <div class="child">wdw</div>
            <div class="child">abc</div>
            <div class="child">def</div>
</div>
<div class="col">
            <div class="child">ghi</div>
            <div class="child">jkl</div>
            <div class="child">mno</div>
</div>
        </div>
    </div>

CSS：

.wrapper {
max-width: 100%;
}
.col {
width: 33%;
float: left
}

编辑：已更改以符合您的要求。如果您希望它根据父级身高或项目数或其他任何内容自动排列，则必须使用javascript。单独使用CSS是不可能的。

Answer 2

.wrapper {
width: 100%;
}

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

Answer 3

我为你创造了小提琴，但是有更改栏目安排。

fiddle

<div class="wrapper">
    <div class="parent">
        <div class="columnOne">one</div>
        <div class="columnTwo">xzcx</div>
        <div class="columnOne">cas</div>
        <div class="columnTwo">cccccc</div>

        <div class="columnOne">asds</div
        <div class="columnTwo">ccccccccswsww</div>
         <div class="columnOne">wdw</div>
        <div class="columnTwo">ccccccccswsww</div>



    </div>
</div>

.wrapper {
    max-width:100%;
}

.parent {
    width: 100%;
    height:100%;
    float: left;
}

.columnOne {
    float: left;
    width: 45%;
}

.columnTwo {
    float: left;    
    width: 45%;
}

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

3 个答案: