圖像浮動，clearfix

-2

我不知道如何描述問題，因此請訪問該鏈接。圖像浮動，clearfix

在這種(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)的頁面，白色背景消失。

我該如何解決問題？

來源

2011-03-12 Peter

問題是所有的縮略圖都是「浮動的」。查看CSS「float」屬性。浮動元素不佔用頁面空間。爲了解決這個問題，你可以在所有縮略圖之後使用某種CSS「clearfix」。

這樣做的和quickfix是添加：

<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

來源

2011-03-12 06:13:23

有什麼clearfix的優勢在哪裏？編寫'.clear'類看起來更復雜。 – 2011-03-12 06:17:30

謝謝約翰，你的解釋有很大幫助 – Peter 2011-03-12 06:18:08

clearfix的優點是你不必在你想清除的元素之後創建一個單獨的元素，以使清除工作。使用clearfix，您可以有：，並且在圖像之後會添加清除。有了明確的課程，你必須做一些事情：

。 clearfix保留了語義HTML代碼。 – 2011-03-17 03:14:28

剛加

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

的</ul>

問題您有後與您的浮動圖像元素做。 CSS可能難以計算包含浮動元素的div的高度。

來源

2011-03-12 06:15:16 superUntitled

謝謝，@superUntitled – Peter 2011-03-12 06:17:18

@peter。下面John的回答也是正確的。你已經使用了我給你代碼中其他地方的例子，所以我就這樣做了。不要忘記接受答案。 – superUntitled 2011-03-12 06:20:51

只是用下面的代碼替換你當前的代碼。它將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>

來源

2014-05-04 20:40:39

在這裏添加一個你在做什麼的解釋可能會更好，因爲很久以前這個問題就被問到了，原來的提問者甚至可能不會看到這個。 – 2014-05-04 21:07:02

我同意你的第一條評論。但「原來的提問者甚至不會看到這個」，這是不正確的，因爲如果有人遇到同樣的問題，那麼我認爲它會幫助他們。 – 2014-05-04 21:15:04

圖像浮動，clearfix

回答

相關問題