27 votos

Ajuste de texto alrededor de un div con CSS

Estoy tratando de conseguir un texto se ajuste alrededor de un div en mi XHTML. Mi XHTML se ve así....

<div id="cont-content">


<p>content</p>

<p>more content</p>

<div id="content-sidebar">

 BLALALALALLAAL

 </div>

  </div>

Y mi CSS se parece a...

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

Se puede ver ninguna razón por qué el texto no se ajuste alrededor de este Div?

36voto

kavoir.com Puntos 2813

Sí lo tienes. El #contenido de la barra lateral debe ser antes de que todos los textos que se supone que son para envolver. Como este:

<div id="cont-content">

<div id="content-sidebar">

 BLALALALALLAAL

 </div>

<p>content</p>

<p>more content</p>


  </div>

0voto

  1. Cortar la imagen en rodajas y recortar la parte donde desea que aparezca el texto de flujo. El más sectores que hacer, la más bonita de la envoltura será.

  2. poner estos sectores en el código HTML. Darles una clase llamada 'wrap', así:

    <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. Poner en tu CSS:

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

Este va a flotar sus cortes a la izquierda y mantenerlos juntos como una sola imagen, permitiendo que el texto fluya alrededor de la derecha. El margen de ajuste, así, crear un margen entre la imagen y el texto.

Si desea que la imagen flote a la derecha, recortar distancia al otro lado de los sectores y uso:

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: