用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 ; 
}