1

我有一个 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奏效。paddingmax-height

4

3 回答 3

0 
.wrapper {
width: 100%;
}

.child {
width: 33%;
float: left;
}
于 2013-09-25T12:40:06.763 回答
0

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 是不可能的。

于 2013-09-25T12:32:25.690 回答
0

我已经为你创建了小提琴，但是有改变列的排列。

小提琴

<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%;
}
于 2013-09-25T12:57:46.377 回答