css - CSS 和 OpenCart

Question

一直在定制一家商店，遇到了一些问题。认为它与 CSS 但无法解决。排序选择框和搜索结果之间存在间隙，没有填充或边距，使用相同的布局为类别显示相同的代码没有问题。

如果我错过了所有帮助，你能看看吗:)

谢谢乔

score 1 · Accepted Answer

排序选择框和搜索结果之间存在差距的原因是因为您是浮动元素，并且为了清除它们，您正在使用“额外标记”方法。这导致了差距。在您的特定情况下，请执行以下操作。

<div class="sort">
<div class="clear"></div>

首先删除 div.clear。这将消除间隙。但是，这也会导致下面的 div 生效并重叠，因为您浮动如下。

div.sort {float: right;}

现在清除浮动如下。

div#dkProductList {clear: right;}

现在您将看到 div id="dkProductList" 正好在 div class="sort" 之下，并且差距消失了。如果您希望两者之间有一些差距，只需添加一些边距，例如：

div#dkProductList {margin-top: 10px;}

这完全解决了你的问题。还有其他方法，例如，除了使用额外的标记（例如您使用 div class="clear" 来“取消”浮动效果），您可以使用值为“”的“溢出”属性汽车”。这样就不需要额外的标记。

在 IE9、FF4.01、GG11、AF5.0.5 和 Opera 11 中测试。

1 回答 1