我不知道为什么会这样。我能解决这个问题的唯一方法是在文本之后放置大量的中断,但显然这不是一个可接受的解决方案。
独立的 CSS:
.center_column {
max-width: 892px;
float: left;
}
.content {
width: 892px;
background-color: #FFF;
background-image: url("style/contentpost.png");
background-repeat: no-repeat;
border-style: solid;
border-width: 2px;
border-color: #7699bb;
border-radius: 10px;
}
.content_wrap {
margin-top: 40px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
text-align: left;
}
.text {
width: 100%;
margin-top: 20px;
text-align: justify;
text-justify: distribute;
font-weight: normal;
font-size: 16px;
}
独立的 HTML:
<div class="center_column">
<div class="content">
<div class="content_wrap">
<div class="text">
<img src="image">Text
</div>
</div>
</div>
</div>
为什么会这样?谁能告诉我如何解决这个问题? 提前谢谢你:)
最佳答案
这将强制浏览器计算包含 float 的 div 的高度:
.text{
overflow: hidden;
}
此外,如果您出于某种原因不想overflow:hidden
,请在谷歌上搜索 clearfix。
关于css - DIV 中的图像超出其边界,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13395278/