Question

我的div中的内嵌图像使用position:absolute进行内联（我不能使用其他内联方法，因为它们会导致行高变化。）这些图像流出div并且发送到下一行...但图像没有下降..它被发送到下一行意味着它被发送到div的最左边但它不会向下移动高度所以它几乎像它停留在同一条线上，但向左移动？我该如何解决这个问题？

示例：（*将最后 TWO 图像的宽度从30px更改为150px，以查看我所描述的效果。）http://jsfiddle.net/ztKP5/2/

代码：（*将最后 TWO 图像的宽度从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>

Answer 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>

Answer 2

将绝对定位图片包含在display:inline-block（... 不 display:inline）的div中解决了问题。

添加额外的“！”在“测试”文本之后看到：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>

内联图像在溢出换行时不向下移动

2 个答案: