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 に答える