背景顏色不覆蓋DIV

Question

的全高度--- HTML

<div id="story"> 
<div id="individual"> 
<img src='uploads/1231924837Picture.png'/> 

<h2>2009-01-14</h2> 
<h1>Headline</h1> 
<p>stroy story etc stroy story etc stroy story etc</p> 
</div> 
<br /> 
<div id="storynav"> 
<a href='home.php?start=0'>1</a> 
<a href='home.php?start=1'>2</a> 
<a href='home.php?start=2'>3</a> 
<a href='home.php?start=3'>4</a> 
<a href='home.php?start=4'>5</a> 
<a href='home.php?start=5'>6</a> 
<a href='home.php?start=6'>7</a> 
<a href='home.php?start=7'>8</a> 
<a href='home.php?start=8'>9</a>   
</div> 
</div> 

--- CSS

#story img{ 
border: none; 
float: right; 
display: inline; 
padding: 10px; 
margin-top: 30px; 
} 
#story{ 
width: 600px; 
height: inherit; 
background-color:black; 
margin-left: 34px; 
margin-bottom: 3px; 
} 

#individual{ 
background-color: #000000; 
clear:both; 
} 

#storynav{ 
font-size: 10px; 
text-align: center; 
} 

alt text http://clients.bionic-comms.co.uk/drew/testygubbins/OO/test/img.png

上面的代碼和CSS是讓我頭疼，因爲，如圖所示，當我添加圖像時，div背景顏色會變得混亂。這是動態內容，但我認爲顯示靜態html會更容易。任何人都可以告訴我我做錯了什麼？背景顏色也應該覆蓋圖片。謝謝！

編輯

謝謝你。這是我以前試過的東西，但它什麼都不做。我也在那裏嘗試了一個隔離器，但它沒有做任何事情。狼狽！

Answer 1

您在圖片設置爲向右浮動這意味着容器div不能算出它的實際高度。您需要清除浮動元素，這實際上讓容器知道圖像的大小。

您需要的風格clear: both;在你的HTML添加元素img標籤的下面，最好是在DIV像這樣的結尾：

<div id="story"> 
<div id="individual"> 
<img src='uploads/1231924837Picture.png'/> 

<h2>2009-01-14</h2> 
<h1>Headline</h1> 
<p>stroy story etc stroy story etc stroy story etc</p> 
</div> 
<br /> 
<div id="storynav"> 
<a href='home.php?start=0'>1</a> 
<a href='home.php?start=1'>2</a> 
<a href='home.php?start=2'>3</a> 
<a href='home.php?start=3'>4</a> 
<a href='home.php?start=4'>5</a> 
<a href='home.php?start=5'>6</a> 
<a href='home.php?start=6'>7</a> 
<a href='home.php?start=7'>8</a> 
<a href='home.php?start=8'>9</a>   
</div> 
    <div class="clear"></div> <-- add this here 
</div> 

並添加類：

.clear 
{ 
    clear: both; 
} 

Answer 2

閱讀：http://www.quirksmode.org/css/clearing.html

總之，試試這個：

--- HTML

<div id="story"> 
<div id="individual"> 
<img src='uploads/1231924837Picture.png'/> 

<h2>2009-01-14</h2> 
<h1>Headline</h1> 
<p>stroy story etc stroy story etc stroy story etc</p> 
</div> 
<br /> 
<div id="storynav"> 
<a href='home.php?start=0'>1</a> 
<a href='home.php?start=1'>2</a> 
<a href='home.php?start=2'>3</a> 
<a href='home.php?start=3'>4</a> 
<a href='home.php?start=4'>5</a> 
<a href='home.php?start=5'>6</a> 
<a href='home.php?start=6'>7</a> 
<a href='home.php?start=7'>8</a> 
<a href='home.php?start=8'>9</a> 
<div class="clear"></div> 
</div> 
</div> 

--- CSS

#story img{ 
border: none; 
float: right; 
display: inline; 
padding: 10px; 
margin-top: 30px; 
} 
#story{ 
width: 600px; 
height: inherit; 
background-color:black; 
margin-left: 34px; 
margin-bottom: 3px; 
} 

#individual{ 
background-color: #000000; 
clear:both; 
} 

#storynav{ 
font-size: 10px; 
text-align: center; 
} 

.clear { 
    clear: both; 
}