0

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

该行没有显示三个产品,而是仅显示一个。

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

对我来说,这似乎是随机发生的,而且只在某些情况下发生。还有其他所有具有相同类的类别页面不显示此行为。示例: http: //www.derodewinkel.nl/shop-online.html

有任何想法吗?

4

2 回答 2

2

您的问题显而易见但很微妙:

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

此元素导致其中一个.itemdiv 高 1 个像素,这会破坏浮点序列。

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

如果您将高度或最小高度增加.item几个像素,您将有一个很好的解决方案。

一种解决方法是固定子块元素之一的高度:

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

(参见product.css)

如果固定 的高度.content,那么任何可能出现的可选内联元素都不会影响.item块元素的整体高度。

在这种情况下,固定高度是可行的,因为您的内容非常可预测,价格、商品编号、小品牌标志,都非常明确。

于 2013-08-29T14:27:20.967 回答
1

似乎 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 }
于 2013-08-29T14:27:06.190 回答