文字以div左浮動圖像換行，而不是div帶有右浮動圖像換行

Question

我已經能夠成功地將文本包裝在div中，圖像在左側，但我無法將文本包裝在div中，圖像在右側。 我試過向左浮動p。 我還嘗試過將帶有右浮動圖像的div的顯示模式更改為嵌入式和嵌入式塊。 我也嘗試使用文字左對齊。

這是文本自動換行的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標簽添加寬度。