目录中的浮动元素未按我想要的方式显示

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

您是否对布局的最后一个元素应用了清除属性？是强制性的...

Answer 3

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

既然你想显示图片，你可能还想看看CollagePlus。

目录中的浮动元素未按我想要的方式显示

Floated elements in catalog are appearing not the way I wanted

html

css

css-float