圖片超越div容器邊界

Question

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

我認爲一個div應該調整它，以適應它的高度中的元素，除非該元素絕對定位。

爲什麼div不能展開到圖像的整個高度？

我需要將圖像對齊到右側。我知道如何做到這一點的唯一方法是align='right',position:absolute; right: 0;和float:right，所有這些都使得包含div的高度不會調整到圖像高度。

Answer 1

.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

Answer 2

哎呀，道歉，張貼和你編輯你的問題 - 對齊權是浮動它我相信（你應該改爲使用float：右和某種clearfix）。

例如：http://jsfiddle.net/R4bCy/5/

Answer 3

你需要做的是p標籤後加什麼，

<div style="clear:both;"></div> 

Answer 4

這是什麼，我相信你想要的： http://jsfiddle.net/R4bCy/6/

如果你想要編輯左邊的文字和浮動到右側的圖像，請做，這是你的CSS： http://jsfiddle.net/R4bCy/15/

您也可以有包含一個容器內div 50％的寬度的兩個div秒。這將允許你更多的靈活性，你的圖像的位置，因爲文本和圖像將各自有自己的修改div s的獨立屬性

Answer 5

「爲什麼股利不擴展到圖像的整個高度？

因爲浮點數將與塊重疊，所以只有塊格式化上下文包含浮點數。 （你可以找到整個話題的一個很好的概述這裏：http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/）

在手頭解決的問題：

的align=right實際上將導致IMG是float: right（該align屬性已被棄用，CSS應該使用）。

要包含在其父div浮動圖像需要要麼有父div建立塊格式化上下文（塊格式化上下文括嵌套浮子）或明確地與要稱作一個所述img後的附加元件清除浮clear: right。

一個簡單的解決方案來創建一個塊格式上下文是漂浮在母體div爲好，雖然我在這種情況下優選的解決方案是簡單地設置其overflow到hidden（也導致塊格式化上下文）。

查看更新的小提琴http://jsfiddle.net/R4bCy/8/。