0

我已经能够成功地将文本包装在一个带有左侧图像的 div 中，但我无法将文本包装在一个图像浮动到右侧的 div 中。我试过向左浮动 p。我还尝试将带有右浮动图像的 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>
4

1 回答 1

1

尝试它在我身边工作。

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

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

于 2012-09-11T23:48:28.687 回答