Gói văn bản quanh div với CSS

Question

Tôi đang cố gắng lấy văn bản để quấn quanh một số div trong XHTML của mình. XHTML của tôi trông giống như vậy ....

<div id="cont-content"> 


<p>content</p> 

<p>more content</p> 

<div id="content-sidebar"> 

BLALALALALLAAL 

</div> 

    </div> 

Và CSS của tôi trông giống như ...

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

Bạn có thấy bất kỳ lý do tại sao các văn bản sẽ không quấn quanh Div này?

Answer 1

Bạn nhận được nó. # Content-sidebar phải ở trước tất cả các văn bản được cho là để bọc nó. Như thế này:

<div id="cont-content"> 

<div id="content-sidebar"> 

BLALALALALLAAL 

</div> 

<p>content</p> 

<p>more content</p> 


    </div> 

Answer 2

1. Cắt hình ảnh của bạn thành lát có liên quan và cắt đi những phần mà bạn muốn văn bản của bạn chảy. Càng có nhiều bạn tạo ra, thì gói của bạn càng đẹp hơn.

2. đặt những lát này vào HTML của bạn. Cung cấp cho họ một lớp được gọi là 'bọc', như vậy:

   <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. Đặt trong CSS của bạn:

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

này sẽ nổi lát của bạn sang trái và giữ chúng lại với nhau như một hình ảnh , cho phép văn bản của bạn chảy quanh bên phải. Các thiết lập lề sẽ, tốt, tạo ra một lề giữa hình ảnh và văn bản.

Nếu bạn muốn hình ảnh nổi trên bên phải, cắt đi phía bên kia của lát và sử dụng của bạn:

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