内嵌图像影响的line-height

我有一个div，我在网上添加图像，问题是当图像比线高度更大，它只是增加了，而不必像过去行高文本。内嵌图像影响的line-height

这里是我的代码：

<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进行绝对定位。

我只想绝对定位图像上我自己的，但文字如有更改，所以我需要一个灵活的解决方案。

来源

2013-01-11 Albert Renshaw

你可以尝试添加CSS属性'浮动：left'或“float：right”，如果这符合你的需要 – DON

更换

display:in-line;

与

position:absolute;

http://jsfiddle.net/ENch9/

vertical-align:text-top;

http://jsfiddle.net/c6YqG/

来源

2013-01-11 07:29:34

这是工作，但后来我增加了更多的文本，使图像将返回到下一行，并开始重叠文本（如果宽度变大）。见的例子中，我将增加宽度和文本被掩盖了：http://jsfiddle.net/SGgg5/ http://jsfiddle.net/Tgyxp/ –

使宽度我与有问题的文字顶修复绝对的位置，但现在的问题是，如果高度太大，文本顶部下一行的行高度是扭曲的，这不会发生位置：绝对...... http://jsfiddle.net/Pu4FF/我需要以某种方式结合这两个哈哈。 –

通过在图像内部添加图像并在图像周围添加图像，并在图像后添加一个固定宽度的空白图像来解决此问题，该图像的宽度不是绝对定位的，但其宽度小于线条高度的宽度，不会像第一个那样影响它（如果你愿意的话，这个图像SRC很烂），我还必须调整图像的位置到底部:-(插入图像高度的一半）px;并将div的位置设置为相对。 HTTP：//的jsfiddle。net/tYWJT/ –

的微笑，你可以尝试：

img { 
vertical-align:middle; 
}

来源

2013-01-11 07:28:42 primetwig

找到我使用图像上缘阴性是这种最灵活的解决方案：

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

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

来源

2015-12-03 17:07:25 bjnsn

内嵌图像影响的line-height

回答

相关问题