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

106

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

ingrese la descripción de la imagen aquí

¿Pregunta si esto es posible?

html css usuario1780343
fuente
1
posible duplicado de Envolver texto alrededor de una imagen con sangría y justificar
mavrosxristoforos
¿Está tratando de envolver el texto alrededor de una imagen como en las <p>etiquetas normales y así sucesivamente, pero también mencionó <textarea>, que podría ser un problema totalmente diferente? ¿Por qué no publicas tu HTML si tienes alguno? Gracias.
Marc Audet
1
Sí, simplemente haría flotar la imagen php a la izquierda, y el texto la rodeará :-)
Jack Tuck
Todos estos comentarios y ninguna respuesta aceptada ...
Dave Kanter

Respuestas:

110

tienes a floattu 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/

BeNdErR
fuente
51

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

De hecho, puede ajustar el texto de modo que tome la forma del borde de la imagen o polígono alrededor del cual lo está ajustando.

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>
Expandir fragmento

Además, aquí hay una buena lista de artículos sobre formas CSS

Danield
fuente
1
¿Hay alguna opción para envolver "ALREDEDOR" del objeto para que el objeto pueda estar en el medio?
redestructa
@redestructa echa un vistazo a las exclusiones de CSS. Lee mi publicación: stackoverflow.com/a/19895616/703717 Actualmente solo es compatible con IE - caniuse.com/#feat=css-exclusions
Danield
20

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

    <div style="width:100%;">
        <div style="float:left;width:30%; background:red;">...something something something  random text</div>
        <div style="float:none; background:yellow;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
    </div>
Expandir fragmento

T.Todua
fuente
esta es la única forma en que podría hacer que esto funcione ... Y la solución más limpia.
andygoestohollywood
flotar: ¡ninguno fue lo que me salvó! Siguió intentando flotar: corregir el segundo elemento en vano.
bkunzi01
11

Si el tamaño de la imagen es variable o el diseño responde , además de ajustar el texto, puede establecer un ancho mínimo para el párrafo para evitar que se vuelva demasiado estrecho.
Proporcione un pseudoelemento 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, llevándose el párrafo con él.

#container:before {
  content: ' ';
  display: table;
  width: 10em;    /* Min width required */
}
#floated{
    float: left;
    width: 150px;
    background: red;
}
Jithin B
fuente
Creo que tu respuesta me puede ahorrar algo de tocino. Estaba teniendo un problema con las imágenes flotantes a la izquierda apiladas en un diseño receptivo. Dado que mi ancho de imagen predeterminado es del 30% e imágenes en ambos lados, a veces podría tener una columna de texto de solo 4 caracteres de ancho.
Sherwood Botsford