Wrapping text around a div with CSS

问题:

I am trying to get a text to wrap around a div in my XHTML. My XHTML looks like so....

<div id="cont-content">


<p>content</p>

<p>more content</p>

<div id="content-sidebar">

 BLALALALALLAAL

 </div>

  </div>

And my CSS looks like...

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

Can you see any reason why the text will not wrap around this Div?

回答1:

Yep you got it. The #content-sidebar should be before all the texts which are supposed to wrap it. Like this:

<div id="cont-content">

<div id="content-sidebar">

 BLALALALALLAAL

 </div>

<p>content</p>

<p>more content</p>


  </div>

回答2:

1. Cut your image into relevant slices and crop away the part where you want your text to flow. The more slices you make, the prettier your wrap will be.

2. put these slices in your HTML. Give them a class called 'wrap', like so:

   <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. Put in your CSS:

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

This will float your slices to the left and keep them together as one image, allowing your text to flow around on the right. The margin setting will, well, create a margin between image and text.

If you want the image to float on the right, crop away the other side of your slices and use:

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