相关疑难解决方法(0)

影响线高的内联图像

我有一个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>

Run Code Online (Sandbox Code Playgroud)

示例:http://jsfiddle.net/dWkfq/1/

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

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

我绝对会将图像放在我自己的位置,但文本可能会发生变化,所以我需要一个灵活的解决方案.

javascript css inline image

Alb*_*haw

lucky-day

3
推荐指数

1
解决办法

2796
查看次数

表情符号导致行高发生变化

<p>Alternatively, you can use percentages, which
   will be calculated with respect to the width of the generated box's
   containing block. &#128517;Therefore, assuming the container's width
   is greater than the image's height, margin: -50% 0 should be enough.
   Hide code snippet
</p>

Run Code Online (Sandbox Code Playgroud)

如何避免插入表情符号时行高发生变化？