Envelopper le texte autour d'un div avec CSS

Question

J'essaie d'obtenir un texte à enrouler autour de div dans mon XHTML. Mon XHTML ressemble à ça ....

 <div id="cont-content">


<p>content</p>

<p>more content</p>

<div id="content-sidebar">

 BLALALALALLAAL

 </div>

  </div>
 

Et mon CSS ressemble à ...

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

Pouvez-vous voir une raison pour laquelle le texte ne s'enroulera pas autour de cette Div?

Answer 1

Oui, vous l'avez. La barre latérale # content devrait être placée avant tous les textes censés la boucler. Comme ça:

 <div id="cont-content">

<div id="content-sidebar">

 BLALALALALLAAL

 </div>

<p>content</p>

<p>more content</p>


  </div>
 

Answer 2

1. Couper votre image en tranches et de rogner la partie où vous voulez que votre texte à l'écoulement. Plus les tranches que vous faites, le plus joli votre écharpe sera.

2. mettre ces morceaux dans votre code HTML. Leur donner une classe appelée 'wrap', comme ceci:

   <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. Mettre dans votre CSS:

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

Cela va flotter vos tranches de la gauche et de les garder ensemble, comme une seule image, permettant à votre texte autour de sur la droite. La marge de réglage, ainsi, créer une marge entre l'image et le texte.

Si vous voulez que l'image de flotter sur la droite, rogner l'autre côté de vos tranches et de les utiliser:

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