poner - texto flotante sobre imagen html

Cómo envolver texto alrededor de una imagen usando HTML/CSS

Question

Quiero diseñar un bloque de texto como la siguiente imagen:

( https://docs.google.com/file/d/0B8gEuF9U3SaENzNsOTdxMmV3Ykk/edit?usp=sharing )

Pregunta si esto es posible?

Answer 1

Con CSS Shapes puede ir un paso más allá de simplemente flotar texto alrededor de una imagen rectangular.

En realidad, puede ajustar el texto de manera que adopte la forma del borde de la imagen o polígono en el que lo está envolviendo.

DEMO FIDDLE (Actualmente trabajando en webkit - caniuse )

.oval {
width: 400px;
height: 250px;
color: #111;
border-radius: 50%;
text-align: center;
font-size: 90px;
float: left;
shape-outside: ellipse();
padding: 10px;
background-color: MediumPurple;
background-clip: content-box;
}
span {
padding-top: 70px;
display: inline-block;
}

<div class="oval"><span>PHP</span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Además, aquí hay una buena lista aparte del artículo sobre CSS Shapes

Answer 2

Si el tamaño de la imagen es variable o el diseño responde , además de envolver el texto, puede establecer un ancho mínimo para el párrafo para evitar que sea demasiado estrecho.
Proporcione un pseudo-elemento CSS invisible con el ancho de párrafo mínimo deseado. Si no hay suficiente espacio para caber este pseudo-elemento, entonces será empujado hacia abajo debajo de la imagen, llevando el párrafo consigo.

#container:before {
content: '' '';
display: table;
width: 10em; /* Min width required */
}
#floated{
float: left;
width: 150px;
background: red;
}

Answer 3

debe hacer float su contenedor de imágenes de la siguiente manera:

HTML

<div id="container">
<div id="floated">...some other random text</div>
...
some random text
...
</div>

CSS

#container{
width: 400px;
background: yellow;
}
#floated{
float: left;
width: 150px;
background: red;
}

VIOLÍN

http://jsfiddle.net/kYDgL/

Answer 4

Además de la respuesta de BeNdErR :
El elemento "other TEXT" debería tener float:none , como:

<div style="width:100%;">
<div style="float:left;width:30%; background:red;">...some other random text</div>
<div style="float:none; background:yellow;"> ...some random text ... <br/>...some random text ...some random text </div>
</div>

http://jsfiddle.net/watz5fg8/3/