[英]Image inside DIV goes beyond its borders
I have no idea why does this happen. 我不知道为什么会这样。 The only way I could fix this is to put a load of breaks after the text, but obviously this is not an acceptable solution.
我能解决这个问题的唯一方法就是在文本之后添加一些断点,但显然这不是一个可接受的解决方案。
Isolated CSS: 孤立的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;
}
Isolated HTML: 隔离的HTML:
<div class="center_column">
<div class="content">
<div class="content_wrap">
<div class="text">
<img src="image">Text
</div>
</div>
</div>
</div>
Why does this happen? 为什么会这样? Could anybody tell me how to fix that?
谁能告诉我如何解决这个问题? Thank you in advance :)
先感谢您 :)
This will force the browser to calculate the height of a div containing float: 这将强制浏览器计算包含float的div的高度:
.text{
overflow: hidden;
}
Also, google for clearfix, if you don't want overflow:hidden
for some reason. 此外,谷歌for clearfix,如果你不想
overflow:hidden
由于某种原因。
It's because of your 这是因为你的
float : left;
You need to add this 你需要添加它
<div class="clear"></div>
below your image. 在你的形象下面。
And add this to your css file 并将其添加到您的css文件中
.clear { clear : both; }
您可以在CSS中使用固定的图像宽度和高度,或在CSS中使用背景位置和大小属性。
Add a <div>
that clears the floating: 添加一个清除浮动的
<div>
:
<div class="center_column">
<div class="content">
<div class="content_wrap">
<div class="text">
<img src="image">Text
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
float: left; 向左飘浮; is your problem ,
是你的问题,
add : 添加:
<div class="clear"></div>
css: CSS:
.clear {
clear: both;
}
See you are not done with your entire layout yet. 看到你还没有完成整个布局。 Try this layout and style..
试试这个布局和风格..
<div class="center_column">
<div class="content">
<div class="content_wrap">
<img class="pic" />
<div class="text">TEXT</div>
</div >
</div>
<div class="footer" >FOOTER</div>
</div>
Add this to your existing styles 将其添加到现有样式中
.pic {
float:left;
}
.footer {
clear: both;
}
FLOAT will actually float everything after it, adding CLEAR both, left or right, will clean floating problems. FLOAT实际上会在它之后浮动所有东西,向左或向右添加CLEAR将清除浮动问题。 In other words, ends the floating effect.
换句话说,结束浮动效果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.