css 影响行高的行内图像

x33g5p2x 于 12个月前发布在其他

关注(0)|答案(4)|浏览(102)

我有一个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的绝对定位。
我只是绝对的立场对我自己的形象，但文字是受改变，所以我需要一个灵活的解决方案。

css

来源：https://stackoverflow.com/questions/14273544/inline-image-affecting-line-height

4条答案

按热度按时间

a64a0gku1#

取代

display:in-line;

字符串
与

position:absolute;

型
http://jsfiddle.net/ENch9/
或

vertical-align:text-top;

型
http://jsfiddle.net/c6YqG/的

赞(0）回复(0）举报 12个月前

8gsdolmq2#

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

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

字符串
http://jsfiddle.net/dWkfq/4/

赞(0）回复(0）举报 12个月前

2exbekwf3#

微笑，你可以试试：

img {
vertical-align:middle;
}

字符串

赞(0）回复(0）举报 12个月前

r8uurelv4#

我将img Package 在<div>中，然后将float:left;添加到img的内嵌样式中

<div style="height: 20px; width: 20px; display: inline-block;"> 
<img style="height:20px; width:20px; float: left;">... </div>

字符串

赞(0）回复(0）举报 12个月前

我来回答

css 影响行高的行内图像

4条答案

相关问题

热门标签

最新问答