用CSS围绕div的文本

Question

我试图让我的XHTML中的文字环绕div。我的XHTML看起来像这样....

<div id="cont-content"> 


<p>content</p> 

<p>more content</p> 

<div id="content-sidebar"> 

BLALALALALLAAL 

</div> 

    </div> 

我的CSS看起来像......

#content-sidebar { 
    display: block; 
    float: right; 
    width: 270px; 
    height: 400px; 
    border: 1px solid red; 
} 

你能看到任何理由文本将不会围绕这个div包裹？

Answer 1

是的，你明白了。 ＃content-sidebar应该放在应该包装它的所有文本之前。就像这样：

<div id="cont-content"> 

<div id="content-sidebar"> 

BLALALALALLAAL 

</div> 

<p>content</p> 

<p>more content</p> 


    </div> 

Answer 2

1. 减少你的图像转换成相关的切片和作物的路程，您希望您的文本流的一部分。您制作的切片越多，包装的美观程度就越高。

2. 将这些切片放入HTML中。给他们一个叫“包装”类，如下所示：

   <img src="slice1.png" width="181" class="wrap"> 
   <img src="slice2.png" width="287" class="wrap"> 
   <img src="slice3.png" width="217" class="wrap"> 
   

3. 把你的CSS：

   .wrap { 
       float: left; 
       clear: left; 
       margin: 0 0.9em 0 0; 
   } 
   

这将漂浮您的切片的左，让他们一起作为一个图像，让你的文字在右边流动。边距设置将在图像和文字之间创建边距。

如果你想浮在右，走作物的切片和使用对方的图像：

.wrap { 
    float: right; 
    clear: right; 
    margin: 0 0 0 0.9em ; 
}