¿Cómo hacer que el texto se ajuste arriba y debajo de un div?

Question

No tengo problemas para conseguir que el texto se ajuste a un div cuando las partes superiores de los elementos están alineadas, pero no puedo encontrar la manera de ajustar el texto encima y debajo del div.

Por ejemplo, quiero que el texto tenga el ancho completo de #container for 40px, luego lo rodeo a la derecha y vuelva a ancho completo.

Véalo en http://jsfiddle.net/cope360/wZw7T/1/. Donde agregué el margen superior a #inset es donde me gustaría que el texto se ajuste. es posible?

CSS:

#inset { 
    width: 100px; 
    height: 100px; 
    background: gray; 
    float: left; 
    margin-top: 40px; 
} 

HTML:

<div id="container"> 
     <div id="inset">Inset</div> 
     This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. 
</div> 

Answer 1

Aquí hay una solución que da el renderizado que quiero basado en la respuesta de moontear y http://www.csstextwrap.com/.

CSS:

div { 
    float: left; 
    clear: left; 
} 

#inset { 
    width: 100px; 
    height: 100px; 
    background: gray; 
    margin: 10px 10px 10px 0px; 
} 

#spacer { 
    width: 0px; 
    height: 40px; 
} 

HTML:

<div id="container"> 
    <div id="spacer"></div> 

    <div id="inset">Inset</div> 
    This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. 
</div> 

Ver por la http://jsfiddle.net/cope360/KbFGv/1/

Answer 2

Por desgracia no se puede tener el texto se distribuya por encima y por debajo, sus constituyen actualmente un limitaciones de HTML. Tendría que usar varios divs y cortar el contenido para que parezca que está envolviendo.

Sólo puede tener que envolver a 1 lado

Answer 3

Fácil problema, solución duro. Solo podrá envolver el texto por un lado con un div, sin embargo, puede ajustar el texto usando varios DIV s.

Una solución es mejor que las palabras: http://www.csstextwrap.com/ pruébalo y verás lo que quiero decir con "varios divs".

Answer 4

Quizás no sea la solución ideal, pero si coloca su div "inserto" en el medio de su texto, en lugar de en la parte superior, y se deshace del margen superior, se ajustará como usted lo desee. De alguna manera siento que esto es una tontería. example

Answer 5

que tenía el mismo problema, y ​​construido sobre la respuesta de cope360 tener algo que no implique agregando marcado adicional. Aquí hay un jsfiddle que básicamente hace lo mismo, pero con CSS puro.

#inset { 
    width: 100px; 
    height: 100px; 
    background: gray; 
    float: left; 
    clear:left; 
} 
#container:before { 
    content: " "; 
    height: 40px; 
    width: 0px; 
    float: left; 
}