當縮小時文字變長

Question

我有一個div，其中有一個圖像和文字一切正常，但當它縮小文本變得更長，跳出div當前我使用overflow-x:hidden;來隱藏它，但爲什麼會發生？這是我的代碼http://jsfiddle.net/z19n1jjg/

<div id="test"><img src="http://placekitten.com/300/301"/> 
<p>content</p> 
</div> 

CSS

#test{ 
border:1px solid black; 
width:300px; 
height:320px; 
overflow-x:auto; 
} 

#test img{ 
float:left; 
width:150px; 
height:150px; 
} 

Answer 1

您正在使用的像素。它們將根據不同的顯示尺寸進行更改

如果您想要相對編碼，請使用em而不是像素。

查看更新小提琴：http://jsfiddle.net/z19n1jjg/1/

#test{ 
    border:1px solid black; 
    width:18em; 
    height:22em; 
    padding:1em; 
} 

#test img{ 
    float:left; 
    width:5em; 
    height:5em; 
    margin:0 .5em 0 .5em; 
} 

難道這就是你要找的人？