Question

大多数时候，我在stackoverflow上找到了我的编码答案，但这次不是。你能帮忙吗？

我有一个装有DIV的容器，它有固定的宽度和可变的高度。它们是内联块，向左浮动。但是在一条新线上，我无法让这些DIV尽可能地向上移动。

这是我的代码：我希望DIV 5在DIV 1下对齐。

<div class="container">
    <div class="s">1</div>
    <div class="m">2</div>
    <div class="l">3</div>
    <div class="m">4</div>
    <div class="s">5</div>
    <div class="m">6</div>
    <div class="l">7</div>
    <div class="m">8</div>
</div>

.container {
    width: 600px;
    border: 1px solid black;
}
.container > div {
    width: 125px;
    border: 1px solid green;
    display: inline-block;
    float: left;
    margin: 5px;  
}
.container > div.s { height: 100px; }
.container > div.m { height: 125px; }
.container > div.l { height: 160px; }

在这里查看我的问题： https://jsfiddle.net/djabt6oo/

我可以使用3列DIV，但在我的情况下这不是一个真正的选择。有CSS解决方案吗？

在新线上对齐上方div旁边的可变高度DIV

0 个答案: