3

我有一个 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 进行绝对定位。

我绝对会自行定位图像，但文本可能会发生变化，因此我需要一个灵活的解决方案。

4

3 回答 3

9

代替

display:in-line;

和

position:absolute;

http://jsfiddle.net/ENch9/

或者

vertical-align:text-top;

http://jsfiddle.net/c6YqG/

于 2013-01-11T07:29:34.207 回答
3

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

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

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

于 2015-12-03T17:07:25.893 回答
2

for smiles you can try:

img {
vertical-align:middle;
}
于 2013-01-11T07:28:42.873 回答