html - 文本换行在带有左浮动图像的 div 中，而不是带有右浮动图像的 div

Question

我已经能够成功地将文本换行到左侧有图像的 div 中，但我无法将文本换行到图像 float 到右侧的 div 中。我试过向左浮动 p。我也尝试过将带有右浮动图像的 div 的显示模式更改为内联和内联 block 。我还尝试使用文本左对齐。

这里是 div 的代码，文本换行没问题。

#text_area_top  
        { 
            margin-top:5%; margin-left: 2%; 
            height: 150px; width:700px;  position:relative; 
            font-family:Arial, Helvetica, sans-serif; font-size:18px;
        }

这是文本不会换行的 div 的代码。

#text_area_bottom
        {
            margin-top:5%; margin-left: 2%; 
            height: 150px; width:700px;  position:relative; 
            font-family:Arial, Helvetica, sans-serif; font-size:18px; 
            background-color:#00FF00; 
            text-align:left;
        }
#text_area_bottom img { float:right; }

这里有一些额外的代码，了解这些代码对于解决这个问题很重要。

p { display:inline-block; position:absolute; margin:0px;   }

如果您需要我提供更多信息，请告诉我，我会及时发布。

这是 html:

  <div class="content">
            <div id="text_area_top">
                <img src="img.png" id="content_img" />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare 
                  urna et ligula lobortis sed aliquam eros eleifend. Aliquam gravida tellus mollis                   
                   massa rhoncus egestas.

                   Aliquam molestie arcu vitae est accumsan rutrum. Cras vitae tellus justo. Quisque pulvinar                adipiscing dolor, non consectetur enim  vehicula quis.Etiam tortor augue, interdum et congue a,                                  imperdiet sed risus. Cras sagittis vestibulum</p>
              </div>

              <div id="text_area_bottom">
                <img src="img.png" id="content_img2" />
                <p>Scelerisque vitae, convallis non nibh. Maecenas euismod lacinia ipsum, non vulputate metus eleifend id. Quisque sagittis posuere massa, sed pretium odio                 dignissim eu. In sit amet est non lectus semper pellentesque vitae in tellus. Nullam facilisis auctor quam at pretium.
                </p>

             </div>
</div>

Answer 1

试着让它在我这边起作用。

p { width:500px; display:inline-block; position:relative; margin:0px; } 

只需为您的 p 标签添加一个宽度。