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;
}

这是你在找什么？

缩小时文本变长

1 个答案: