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

あなたが試すことができる笑顔のために：

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