Question

我有一个div并且我在线添加图像，问题是当图像大于行高时它只会增加行高而不是让图像覆盖文本。

这是我的代码：

<html>
  <body>
    <div style="height:130px; width:130px;">
      one two three four five 

<img src="http://ladyenews.files.wordpress.com/2011/03/smiley-emoticon.png" style="width: 20px; height: 20px; display:in-line;">

       six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen
    </div>
  </body>
</html>

此处示例：http://jsfiddle.net/dWkfq/1/

那么如何在不增加行高的情况下将图像插入到div中，如果图像太大，我需要将图像重叠到文本上？

我想的可能是某种方式将图像放在另一个具有最大高度的div中，然后将溢出设置为可见或者其他东西，但我担心答案会更加困难并且需要使用javascript进行绝对定位。

我只是将图像放在我自己的位置，但文字可能会有所变化，所以我需要一个灵活的解决方案。

Answer 1

替换

display:in-line;

与

position:absolute;

http://jsfiddle.net/ENch9/

OR

vertical-align:text-top;

http://jsfiddle.net/c6YqG/

Answer 2

对于微笑，你可以尝试：

img {
vertical-align:middle;
}

Answer 3

我发现在图像上使用负边距是最灵活的解决方案：

img {
    margin-top:-6px; 
    position: relative; 
    top: 5px;
}

http://jsfiddle.net/dWkfq/4/

影响线高的内联图像

3 个答案: