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

No tengo problemas para obtener texto para envolver un div cuando las partes superiores de los elementos están alineadas, pero no puedo encontrar la forma de ajustar el texto arriba y abajo 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:

 
Inset
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.

Aquí hay una solución que ofrece 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:

 
Inset
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.

Véalo en http://jsfiddle.net/cope360/KbFGv/1/

Problema fácil, solución dura. Solo podrá envolver el texto por un lado con un div, sin embargo, puede envolver el texto usando varios DIV .

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

Tal vez 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. ejemplo

Tuve el mismo problema, y ​​aproveché la respuesta de cope360 para tener algo que no implique agregar marcado extra. Aquí hay un jsfiddle que esencialmente 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; } 

Lamentablemente, no puede tener el texto ajustado tanto arriba como abajo, actualmente es una limitación de html. Tendría que usar varios divs y cortar el contenido para que parezca que está envolviendo.

Solo puedes tenerlo envuelto en 1 lado