web-dev-qa-db-fra.com

Envelopper du texte autour d'une div avec CSS

J'essaie d'obtenir un texte pour entourer une div dans mon XHTML. Mon XHTML ressemble à tellement ....

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

Voyez-vous une raison pour laquelle le texte ne s’enroule pas autour de cette Div?

cssxhtml
27
alex

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

<div id="cont-content">

<div id="content-sidebar">

 BLALALALALLAAL

 </div>

<p>content</p>

<p>more content</p>


  </div>
36
datasn.io

  1. Coupez votre image en tranches appropriées et coupez la partie où vous voulez que votre texte coule. Plus vous faites de tranches, plus votre emballage sera beau.

  2. mettez ces tranches dans votre code HTML. Donnez-leur une classe appelée 'wrap', comme suit:

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

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

Cela fera flotter vos tranches vers la gauche et les gardera comme une seule image, permettant ainsi à votre texte de circuler à droite. Le réglage de la marge créera bien une marge entre l’image et le texte.

Si vous voulez que l’image flotte à droite, coupez l’autre côté de vos tranches et utilisez:

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