图像超出容器div范围 [英] Image goes beyond container div bounds

问题描述

有人可以看看下面的小提琴： http://jsfiddle.net/R4bCy/1/

Can someone take a look at the following fiddle: http://jsfiddle.net/R4bCy/1/

我认为一个div应该调整它的高度以容纳它的元素，除非元素是绝对定位的。

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?

向右对齐。我知道如何做到这一点的唯一方法是 align ='right'， position：absolute; right：0; 和 float：right ，所有这些都使得包含的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.

推荐答案

.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>​​​​​​​​​​

DEMO

这篇关于图像超出容器div范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！