Envolviendo texto alrededor de un div con CSS

Question

Estoy tratando de obtener un texto para envolver un div en mi XHTML. Mi XHTML parece tan ....

<div id="cont-content"> 


<p>content</p> 

<p>more content</p> 

<div id="content-sidebar"> 

BLALALALALLAAL 

</div> 

    </div> 

Y mi CSS parece ...

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

hay algún motivo por el que el texto no se ajustará alrededor de este Div?

Answer 1

Sí, lo tienes. La barra lateral de contenido # debe estar antes de todos los textos que se supone que deben envolverlo. De esta manera:

<div id="cont-content"> 

<div id="content-sidebar"> 

BLALALALALLAAL 

</div> 

<p>content</p> 

<p>more content</p> 


    </div> 

Answer 2

1. cortar su imagen en sectores relevantes y de los cultivos de distancia de la parte en la que desea que el texto fluya. Cuantas más rebanadas hagas, más bonita será tu envoltura.

2. pon estas rebanadas en tu 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 su CSS:

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

Este flotará sus rebanadas a la izquierda y mantenerlos juntos como una sola imagen , permitiendo que su texto fluya a la derecha. La configuración de margen creará, así, un margen entre la imagen y el texto.

Si desea que la imagen flote a la derecha, los cultivos de distancia al otro lado de sus rebanadas y uso:

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