para - estilos de texto css ejemplos

Envolviendo texto alrededor de un div con CSS

Question

Estoy tratando de obtener un texto para envolver 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 parece ...

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

¿Puedes ver alguna razón por la cual el texto no se ajustará a esta Div?

Answer 1

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

<div id="cont-content">

<div id="content-sidebar">

 BLALALALALLAAL

 </div>

<p>content</p>

<p>more content</p>


  </div>

Answer 2

1. Corte su imagen en sectores relevantes y elimine la parte donde desea que fluya su texto. Cuantas más rebanadas hagas, más bonita será tu envoltura.

2. pon estas rebanadas en tu HTML. Dales una clase llamada ''wrap'', como sigue:

   <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. Ponga su CSS:

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

Esto hará flotar tus rebanadas hacia la izquierda y las mantendrá juntas como una imagen, permitiendo que el 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, corte el otro lado de las rebanadas y use:

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