Question

我希望有人可以向我解释本页第四行发生了什么： http://www.derodewinkel.nl/shop-online.html?cat=1&filteritem=534

不显示该行上的三个产品，只显示一个。

每个产品都是一个左边的div。
除了每行上的最后一个产品外，所有css类都相同。
最后一个添加了“last”类，它声明了一个简单的边距重置。

对我来说，它似乎是随机发生的，只是在某些场合发生。还有其他类别页面具有所有相同的类，不显示此行为。例如：http://www.derodewinkel.nl/shop-online.html

有什么想法吗？

Answer 1

你的问题很明显但很微妙：

<span id="MainContent_ProductRepeater1_productoverview_ProductOverviewRepeater_productitem_6_OfferText_6" class="offerText">

这个元素导致.item div之一高一个像素，这会打破浮动序列。

所有花车都需要有相同的高度。

如果您将.item的高度或最小高度增加几个像素，则可以很好地解决问题。

一个修复方法是修复其中一个子块元素的高度：

.productList .item .content {
    overflow: hidden;
    padding: 5px 10px 5px 5px;
    height: 55px;
}

（见product.css）

如果您修正.content的高度，则可能出现的任何可选内联元素都不会影响.item块元素的整体高度。

在这种情况下，修复高度是可行的，因为您的内容非常可预测，价格，商品编号，小品牌徽标，都非常明确。

Answer 2

看来master.css上的322行导致了问题。我删除它，问题消失了。它可能会稍微改变其他页面。

318 #content {
319     position: relative;
320    float: right;
321     font-size: 13px;
322     line-height: 20px; ** REMOVING THIS FIXED IT
323     width: 760px;
324     margin-top: 10px;
325 }

一系列浮动div显示出不正常的行为

2 个答案: