Html 背景色未覆盖div的全部高度
---HTMLHtml 背景色未覆盖div的全部高度,html,css,Html,Css,---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>
<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让我头疼,因为如图所示,当我添加图像时,div背景颜色会变得混乱。这是动态内容,但我认为显示静态html会更容易。谁能告诉我我做错了什么?背景色也应该覆盖图片。谢谢 编辑 谢谢你。这是我以前尝试过的东西,但它没有任何作用。我也试过在那里使用间隔棒,但没有任何效果。搞砸了 读一下: 简言之,请尝试以下方法: ---HTML
您将图像设置为向右浮动,这意味着容器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>
是的,没错,应该可以解决。你的编辑回应了谁?你们都给了我同样的解决方案。我猜你们两个都是P
<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>
#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;
}
<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;
}