内联图像不会在溢出换行符上向下移动答案

【问题标题】：inline image not moving down on overflow line-break内联图像不会在溢出换行符上向下移动
【发布时间】：2013-01-13 21:49:59
【问题描述】：

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

示例：（*将最后两张图像的宽度从 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>

【问题讨论】：

第二个和第四个图像只是间隔，以便下一个文本或图像，或任何将出现在绝对位置图像之后而不是它后面的东西......我可以使用内联 div或跨度或任何东西......
绝对位置不会使元素内联。我也不清楚你到底想做什么。
它使图像内联而不改变行高。如果您只使用 inline 属性，段落的行高会发生变化。
如果您查看我的代码并运行它，然后将最后两个图像的宽度更改为 150px，您会看到它们溢出并因此发送到下一行...问题是他们不会下降，他们只是飞到 div 的左侧。当事情进入下一行时，它们会飞到左侧（开头），但它们也会向下移动行高......这些保持在相同的“y”位置。

标签： css overflow image css-position line-breaks

【解决方案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>

【讨论】：

是的！！！！但是您知道如何将图像放在文本上方吗？ jsfiddle.net/Z9rzx/1
你能贴一张你所追求的图片吗？
到底是什么：jsfiddle.net/Z9rzx/1 除了我需要在文本前面的图像。
我喜欢你的新代码...不幸的是，我知道不能在中间垂直移动图像或沿它们移动，等等，因为图像位置不是绝对的...我发现我在上面发布的一个解决方案虽然允许这个 O:) 谢谢你的帮助！ +1

【解决方案2】：

将绝对定位图像包装在 display:inline-block（...NOTdisplay: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>

【讨论】：