div中的文本包含左浮动图像，但不包含右浮动图像的div

Question

我已经能够成功地将文本包装在带有左侧图像的div中，但我不能将文本包装在div中，图像浮动到右侧。我试过浮左。我也尝试将带有右浮动图像的div的显示模式更改为内联和内联块。我也试过使用text-align left。

这是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标签添加宽度。