--- HTML

2009-01-14
Headline
stroy story etc stroy story etc stroy story etc




1 
2 
3 
4 
5  
6  
7  
8  
9         

--- 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会更容易.谁能告诉我我做错了什么？背景颜色也应该覆盖图片.谢谢!

编辑

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

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

您需要clear: both;在HTML中添加一个带有img标记下方样式的元素,最好是在div的末尾,如下所示:

2009-01-14
Headline
stroy story etc stroy story etc stroy story etc




1 
2 
3 
4 
5  
6  
7  
8  
9         

  
 <-- add this here

并添加类:

.clear
{
  clear: both;
}