背景和CSS浮動

所以我使用960網格系統，並發現了一些他們不支持的東西。我曾考慮切換到Blueprint，但我必須稍後再回到設計。無論如何，我已簡化我的代碼，以顯示我正在經歷：背景和CSS浮動

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Test CSS</title> 
<style type="text/css"> 
    .frame { width: 960px; margin-left: auto; margin-right: auto; } 
    .column { display: inline; float: left; position: relative; margin: 10px 10px 10px 10px; width: 300px; background-color: silver; } 
    #bkg { background-color: blue; } 
</style> 
</head> 

<body> 
    <div class="frame" id="bkg"> 
     <div class="column">Column A</div> 
     <div class="column">Column B<div><br/><br/><br/><br/></div></div> 
     <div class="column">Column C</div> 
    </div> 
</body> 

</html>

我想看到背景擴大到涵蓋所有3列。有什麼我可以做的擴大背景，所以它涵蓋了所有3列？

來源

2009-09-30 Jason N. Gaylord

你可以有框架浮動在：

.frame { width: 960px; margin-left: auto; margin-right: auto;float:left}

和這是它。或者，您可以在框架中添加一個「清除修復」的額外元素。預先製作的960網格爲您提供一個「清除」類：

(css .clearfix { clear: both }) 
<div class="frame" 
    ... 
<div class="clearfix" /></div>

來源

2009-09-30 03:25:32 ndp

感謝您的信息。 – 2009-09-30 03:34:59

您需要將clearfix類應用到#bkg。

<div class="frame clearfix" id="bkg">

來源

2009-09-30 03:23:39

感謝您發佈此信息。 – 2009-09-30 03:34:22

只需添加這個額外的規則，以你的選擇：

div.frame { 
    overflow:hidden; 
}

你不應該需要依靠clearfix除非你有未來的框架之外的元素，也不應該需要依靠任何無關的標記都是明確的：兩者都有。

來源

2009-09-30 03:24:20

我有一個問題，這也適用於我的問題。如果我已將元素浮動到容器中，則會導致容器的背景顯示在浮動元素下。但是這並沒有隱藏任何溢出的內容，那麼如何設置這個效果呢？基本上我知道它的作品，但我想明白爲什麼？ – 2010-12-07 21:15:36

你想要做的是「清除漂浮物」。這裏有很多選項，一些簡單，一些相當複雜。

最簡單的，是最後一列後添加清除用div，像這樣：

<div class="frame" id="bkg"> 
    <div class="column">Column A</div> 
    <div class="column">Column B<div><br/><br/><br/><br/></div></div> 
    <div class="column">Column C</div> 
    <div style="clear: both;"></div> 
</div>

這應該工作。

這裏有一些其他的方式（一些，純CSS）：

來源

2009-09-30 03:24:35

背景和CSS浮動

回答

相關問題