html - 目录中的 float 元素未按我想要的方式显示

Question

我有一个产品目录。所有元素都向左浮动。然而，不同的元素可以有不同的高度，因为里面的图片可以有不同的大小。当中间元素比同一行中的其他元素长时，第二行元素就会卡在中间元素上。

Fiddle

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

您是否已将清除属性应用于布局的最后一个元素？这是强制性的……