Question

有没有办法强制div元素在高度下堆叠在一起？

div{
    width:24%;
    margin-right: 1%;
    float: left;
    margin-top:5px;
}

.one{
    background-color:red;
    height: 50px;
}

.two{
    background-color:green;
    height:35px;
}

.three{
    background-color:orange;
    height:45px;
}

.four{
    background-color:magenta;
    height:25px;
}

.five{
    background-color:black;
    height:55px;
}

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>

<div class="one"></div>
<div class="three"></div>
<div class="four"></div>
<div class="two"></div>
<div class="five"></div>

强制进入下一行的第一个div堆叠在具有最低高度的div上，而其他行再向下推动一行。我想按照它们放置的顺序从左到右堆叠它们，并在它们的兄弟姐妹上面使用可变高度缩进。

编辑：
我不希望它们垂直堆叠，我希望它们在一行中相互堆叠。

Answer 1

为浮动元素添加“clear”属性，例如

{
 float: left;
 clear: left;
}

Answer 2

如果您将clear: both添加到div样式，它们将显示在彼此之下。

jsfiddle

Answer 3

试

div{
    width:24%;
    margin-right: 1%;
    margin-top:5px;
}

从左到右强制div堆栈

3 个答案: