0

を使用してインラインになっているインライン画像がdivにありますposition:absolute（行の高さが変更されるため、インラインに他の方法を使用できません）。これらの画像はdivから流れ出て、次の行に送信されます。 。しかし、画像は下がらない..次の行に送信されます。つまり、divの左端に送信されますが、高さは下がらないため、同じ行に留まっているように見えますが、移動します。左の方です？どうすればこれを修正できますか？

例:(*最後の2つの画像の幅を30pxから150pxに変更して、私が説明している効果を確認します。）http://jsfiddle.net/ztKP5/2/

コード：（*最後の2つの画像の幅を30pxから150pxに変更して、私が説明している効果を確認します。）

<div style="font: 30px; border:1px solid black; width: 350px; height:350px; word-wrap: break-word;">

<font face='helvetica'>

Test test test test test test test test test test test test test test test test!!

<img src='http://home.comcast.net/~urbanjost/images/globe_west_2048.jpg' style='width: 100px; height: 75px; position:absolute;'>
<img src='' style='width:100px; height:2px;'> <!-- this is a spacer-->

<img src='http://home.comcast.net/~urbanjost/images/globe_west_2048.jpg' style='width: 30px; height: 75px; position:absolute;'>
<img src='' style='width:30px; height:2px;'> <!-- this is a spacer-->


</font>

</div>
4

2 に答える 2

1

このクロスブラウザは見ていませんが、Firefox で動作します。 http://jsfiddle.net/digitalagua/NeX4A/

<style>
.holder {
    font-size: 16px;
    font-family:Helvetica,Arial,sans-serif;
    border:1px solid black;
    width: 350px;
    height:350px;
    word-wrap: break-word;
    display:inline-block;
}

.floater {
    width: 150px; height: 75px;margin-bottom:-63px;
}
<style>

<div class="holder">

Test test test test test test test test test test test test test test test test!!

<img src="http://home.comcast.net/~urbanjost/images/globe_west_2048.jpg" class="floater">
Test test test test test test test test test test test test test test test test!!

<img src="http://home.comcast.net/~urbanjost/images/globe_west_2048.jpg" class="floater">
Test test test test test test test test test test test test test test test test!!

</div>
于 2013-01-13T22:08:39.520 に答える
0

絶対位置display:inline-blockの画像を(... NOT )だった div でラップするとdisplay:inline、問題が修正されました。

余分な「！」を追加します ここに表示される「テスト」テキストの後: http://jsfiddle.net/Z9rzx/2/

または、「!」を追加します。以下のソースコードの「テスト」テキストの後に、次の行に移動して画像を確認します。

<!--The second and fourth images are just spacers so that the next text, or image, or whatever will appear after the absolutely positions image instead of behind it... I could have used an in-line div or a span or anything...-->


<div style="font: 30px; border:1px solid black; width: 350px; height:350px; word-wrap: break-word;">

<font face='helvetica'>

Test test test test test test test test test test test test test test test test!!!!!!!!

<div style="width:100px; display:inline-block;">
  <img src='http://home.comcast.net/~urbanjost/images/globe_west_2048.jpg' style='width: 100px; position:absolute;'>
  <img src='' style='width: 100px; height:2px;'>
</div>

<div style="width:100px; display:inline-block;">
  <img src='http://home.comcast.net/~urbanjost/images/globe_west_2048.jpg' style='width: 100px; position:absolute;'>
  <img src='' style='width: 100px; height:2px;'>
</div>

test tast test test test test test test test test test test


</font>

</div>
于 2013-01-13T23:01:39.763 に答える