Question

我有一个产品目录。所有元素都向左浮动。然而，不同的元素可以具有不同的高度，因为内部的图片可以具有不同的尺寸。当中间元素比同一行中的其他元素长时，第二行元素会粘在它上面。

HTML：

<div class="frame">
    <div class="element">
        <div></div>
    </div>
    <div class="element">
        <div class="img"></div>
    </div>
    <div class="element">
        <div></div>
    </div>
    <div class="element">
        <div></div>
    </div>
    <div class="element">
        <div></div>
    </div>
</div>

CSS：

.element{
    float: left;
    border: 1px solid black;
    margin: 0px 0px 10px 10px;
    min-height: 110px;
    min-width: 70px;
    box-sizing: border-box;
}
.frame{
    width: 240px;
    overflow: hidden;
    border: 1px solid black;
    padding: 10px 10px 0px 0px;
}
.img{
    height: 130px
}

在这里你可以看到我正在谈论的模型，它不是真正的代码，但它代表了问题。有什么方法可以调整同一行元素的高度，这样高度会调整行中最长的元素吗？

Answer 1

我认为你需要flexbox。

查看我的页面here以及我如何定位图片图块。

Answer 2

您是否已将Clear Property应用于布局的最后一个元素？这是一种讽刺......

Answer 3

单独使用CSS是不可能的，您需要使用JavaScript来解决此问题。砌体解决了这个问题：http://masonry.desandro.com。

由于您想要显示图像，您可能还需要查看CollagePlus。

目录中的浮动元素不是我想要的方式

3 个答案: