内嵌图像会影响行高 [英] Inline image affecting line-height
问题描述
我有一个div，并且要在线添加图像，问题是当图像大于行高时，它只是增加了行高，而不是使图像遍历文本.
I have a div and I am adding an image in-line, the problem is when the image is bigger than the line-height it just increases the line-height instead of having the image go over the text.
这是我的代码:
<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中，如果图像太大，我需要将图像重叠在文本上吗?
So how do I get my image to get inserted into my div without the line-height increasing, I need the image to overlap onto the text if it is too big?
我正在考虑也许以某种方式将图像以最大高度放置在另一个div中，然后将溢出设置为可见或其他，但是我担心答案会更难并且需要使用javascript进行绝对定位.
I was thinking maybe somehow putting the image in another div with a max-height and then setting the overflow to visible or something but I'm afraid the answer will be much harder and involve absolute positioning with javascript.
我只是绝对要自行定位图片，但文字可能会发生变化，因此我需要一个灵活的解决方案.
I would just absolutely position the image on my own but the text is subject to change so I need a flexible solution.
推荐答案
替换
display:in-line;
使用
position:absolute;
OR
vertical-align:text-top;
这篇关于内嵌图像会影响行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
