Html 图像超出容器 div 边界
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12695726/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image goes beyond container div bounds
提问by Jake Wilson
Can someone take a look at the following fiddle: http://jsfiddle.net/R4bCy/1/
有人可以看看以下小提琴：http: //jsfiddle.net/R4bCy/1/
I thought that a div should adjust it's height in order to accommodate it's elements, unless the elements are positioned absolutely.
我认为 div 应该调整它的高度以容纳它的元素，除非元素是绝对定位的。
Why does the div not expand to the full height of the image?
为什么 div 没有扩展到图像的全高？
I need to the image to be aligned to the right. The only ways that I know how to do this is align='right', position:absolute; right: 0;and float:right, all of which make the containing div not adjust it's height to the image height.
我需要将图像与右侧对齐。我知道如何做到这一点的唯一方法是align='right',position:absolute; right: 0;和float:right，所有这些都使包含的 div 不会将其高度调整为图像高度。
回答by Afshin
.intro {
margin: 10px;
outline: 1px solid #CCC;
background: #A00;
color: #FFF;
height:auto;
overflow:auto;
}
?.img{
float:right;
height:auto;
}?
<div class="intro">
<div class="img"> <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s1600/tall+copy.jpg" style="margin: 10px 10px; "/></div>
<p>Sorry, but the page you requested could not be found.</p>
</div>??????????
回答by tow
'Why does the div not expand to the full height of the image?'
“为什么 div 没有扩展到图像的整个高度？”
Because floats will overlap with blocks, only block formatting contexts contain floats. (You can find a pretty good overview of the whole topic here: http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/)
因为浮点数会与块重叠，所以只有块格式上下文包含浮点数。（你可以在这里找到对整个主题的很好的概述：http: //www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/）
On to solve the problem at hand:
关于解决手头的问题：
The align=rightwill actually result in the img being float: right(the alignattribute is deprecated and css should be used).
这align=right实际上会导致 img 存在float: right（align不推荐使用该属性，应使用 css）。
To contain the floated image in its parent divyou need either have the parent divestablish a block formatting context (block formatting contexts enclose nested floats) or explicitly clear the float with an additional element after the imgthat is styled as a clear: right.
要在其父级中包含浮动图像，div您需要让父级div建立块格式上下文（块格式上下文包含嵌套的浮动）或在img样式为clear: right.
An easy solution to create a block formatting context is to float the parent divas well, although my preferred solution in this case would be to simply set its overflowto hidden(also resulting in a block formatting context).
创建块格式上下文的一个简单解决方案是浮动父级div，尽管在这种情况下我的首选解决方案是简单地将其设置overflow为hidden（也会导致块格式上下文）。
Check out the updated fiddle http://jsfiddle.net/R4bCy/8/.
查看更新的小提琴http://jsfiddle.net/R4bCy/8/。
回答by Amien
What you need to do is add after the p tag,
你需要做的是在p标签之后添加，
<div style="clear:both;"></div>
回答by Patrick
This is what I believe you want: http://jsfiddle.net/R4bCy/6/
这就是我相信你想要的：http: //jsfiddle.net/R4bCy/6/
If you wanted the text on the left and the image floated to the right, please do this is your CSS: http://jsfiddle.net/R4bCy/15/
如果你想要左边的文本和浮动到右边的图像，请这样做是你的 CSS：http: //jsfiddle.net/R4bCy/15/
You can also have two divs that have a width of 50% contained within a container div. This will allow you a little more flexibility in your placement of the image because the text and image will each have their own modifiable divs with independent attributes
您还可以将两个div宽度为 50% 的 s 包含在一个 container 中div。这将使您在放置图像时具有更大的灵活性，因为文本和图像将各自具有div具有独立属性的可修改s
回答by quoo
Whoops, apologies, posted and you edited your question - the align right is floating it I believe (you should instead use float:right and a clearfixof some sort).
糟糕，道歉，发布并编辑了您的问题 - 我相信对齐右侧是浮动的（您应该使用 float:right 和某种类型的clearfix）。
example: http://jsfiddle.net/R4bCy/5/
