0

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

示例：（*将最后两张图片的宽度从 30px 更改为 150px 以查看我所描述的效果。）http://jsfiddle.net/ztKP5/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 回答