Question

我不知道如何描述问题，因此请访问该链接。

在这个(A)中，白色背景很好地呈现，但是如果我添加了

<!-- Problem here -->
<ul class="thumb2"><li>
 <a href="/malaysia/ceiling-lights/8044-f610-255" title="">
  <img src="https://lh5.googleusercontent.com/_8Uc0MYA0xgM/TXQ-BvHi-uI/AAAAAAAAAL4/vgYnsHjUziU/s220/8044f610255.jpg" title="" alt="" /></a>
</li></ul>
<!-- Problem here end -->

然后页面变为(B)，白色背景消失。

如何解决问题？

Answer 1

问题在于所有缩略图都是“浮动的”。请参阅CSS“float”属性。浮动元素不占用页面空间。要解决这个问题，您可以在所有缩略图之后使用某种CSS“clearfix”。

这个的快速修正是添加：

<br style="clear: both;" />

完成所有缩略图后。

另一种选择是：

.spacer
{
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
}

然后你可以添加：

<div class="spacer"></div>

如今，疯狂的嘻哈开发者正在使用以下内容：

http://www.webtoolkit.info/css-clearfix.html

Answer 2

只需添加

  <div style="clear: both;">&nbsp;</div>

在</ul>

之后

您遇到的问题与浮动的图像元素有关。 CSS可能很难计算包含浮动元素的div的高度。

Answer 3

JUST使用以下代码替换当前代码。它将100％工作

<style type="text/css">
   .clearfix {
      clear:both;
    }
</style>

<ul class="thumb2"><li>
 <a href="/malaysia/ceiling-lights/8044-f610-255" title="">
  <img src="https://lh5.googleusercontent.com/_8Uc0MYA0xgM/TXQ-BvHi-uI/AAAAAAAAAL4/vgYnsHjUziU/s220/8044f610255.jpg" title="" alt="" /></a>
</li>
</ul>
<div class="clearfix"></div>

图像浮动，clearfix

3 个答案: