背景颜色不覆盖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;
}

_{（来源： bionic-comms.co.uk ）}

上面的代码和CSS让我头疼，因为如图所示，当我添加图像时，div背景颜色变得混乱。这是动态内容，但我认为显示静态html会更容易。 谁能告诉我我做错了什么？ 背景颜色也应该覆盖图片。 谢谢！

编辑

感谢那。 这是我以前尝试过的东西，但它没有做任何事情。 我也在那里尝试了一个垫片，但它没有做任何事情。 狼狈！

Answer 1

您正在将图像设置为向右浮动，这意味着容器div无法计算出它的实际高度。 您需要清除浮动元素，这实际上让容器知道图像的实际大小。

你需要添加一个样式clear: both;的元素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;
}