我有一个产品目录。所有元素都向左浮动。然而,不同的元素可以有不同的高度,因为里面的图片可以有不同的大小。当中间元素比同一行中的其他元素长时,第二行元素会粘在它上面。
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
}
在这里你可以看到我正在谈论的只是一个模型,它不是真正的代码,但它代表了问题。有什么方法可以调整同一行元素的高度,以便高度可以调整该行中最长的元素?
最佳答案
您是否已将清除属性应用于布局的最后一个元素?这是强制性的...
关于html - 目录中的 float 元素的显示方式不是我想要的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27885440/