2012-09-11 162 views
0

我已经能够成功地将文字包裹在div的图像左侧,但是我无法用div图像漂浮在右边。我已经尝试过浮动p了。我也尝试着改变div的显示模式,将右浮动图像改为内联和内联块。我也尝试使用左对齐文本。文字在div中浮动,左浮动图像,但不浮在右浮动图像的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> 
+0

你能提供HTML代码吗? –

+0

我添加了html。对于那个很抱歉。 – DrinkJavaCodeJava

+0

对不起,我应该问图像大小? –

回答

1

尝试,它在我身边工作。

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

只需为您的p标记添加宽度即可。

+0

工作愉快!谢谢 – DrinkJavaCodeJava