sobre - CSS para detener el ajuste del texto debajo de la imagen

texto debajo de imagen html

Question

Tengo el siguiente marcado:

<li id="CN2787">
<img class="fav_star" src="images/fav.png">
<span>Text, text and more text</span>
</li>

Lo quiero así que si el texto se ajusta, no entra en la ''columna'' de la imagen. Sé que puedo hacerlo con una table (lo que estaba haciendo) pero esto no es posible por esta razón .

Intenté lo siguiente sin éxito:

li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}

También intenté float: right .

Gracias.

EDITAR: Quiero que se vea así:

IMG Text starts here and keeps going... and
wrap starts here.

Así no:

IMG Text starts here and keeps going... and
wrap starts in the space left for the image.

Answer 1

Como esta pregunta está ganando muchos puntos de vista y esta fue la respuesta aceptada, sentí la necesidad de agregar el siguiente descargo de responsabilidad:

Esta respuesta fue específica para la pregunta del OP (que tenía el ancho establecido en los ejemplos). Mientras funciona, requiere que tenga un ancho en cada uno de los elementos, la imagen y el párrafo. A menos que sea su requisito, le recomiendo usar la solución de Joe Conlin que se publica como otra respuesta a esta pregunta.

El elemento span es un elemento en línea, no puede cambiar su ancho en CSS.

Puede agregar el siguiente CSS a su tramo, por lo que podrá cambiar su ancho.

display: block;

Otra forma, que por lo general tiene más sentido, es usar un elemento <p> como padre para su <span> .

<li id="CN2787">
<img class="fav_star" src="images/fav.png">
<p>
<span>Text, text and more text</span>
</p>
</li>

Como <p> es un elemento de block , puede establecer su ancho usando CSS, sin tener que cambiar nada.

Pero en ambos casos, dado que ahora tiene un elemento de bloque, deberá hacer flotar la imagen para que su texto no quede debajo de su imagen.

li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}

PD En lugar de float:left en la imagen, también puede poner float:right en li p pero en ese caso, también necesitará text-align:left para realinear el texto correctamente.

PSS Si siguió adelante con la primera solución de no agregar un elemento <p> , su CSS debería verse así:

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}

Answer 2

Envuelve un div alrededor de la imagen y el lapso y agrega lo siguiente a CSS de esta forma:

HTML

 <li id="CN2787">
<div><img class="fav_star" src="images/fav.png"></div>
<div><span>Text, text and more text</span></div>
</li>

CSS

 #CN2787 > div {
display: inline-block;
vertical-align: top;
}
#CN2787 > div:first-of-type {
width: 35%;
}
#CN2787 > div:last-of-type {
width: 65%;
}

MENOS

 #CN2787 {
> div {
display: inline-block;
vertical-align: top;
}
> div:first-of-type {
width: 35%;
}
> div:last-of-type {
width: 65%;
}
}

Answer 3

Para aquellos que quieren información de fondo, aquí hay un breve artículo que explica por qué se overflow: hidden trabajos overflow: hidden . Tiene que ver con el llamado contexto de formato de bloque . Esto es parte de las especificaciones del W3C (es decir, no es un hack) y es básicamente la región ocupada por un elemento con un flujo de tipo bloque.

Cada vez que se aplica, overflow: hidden crea un nuevo contexto de formato de bloque. Pero no es la única propiedad capaz de desencadenar ese comportamiento. Citando una presentation de Fiona Chan de Sydney Web Apps Group:

• flotar: izquierda / derecha
• desbordamiento: oculto / automático / desplazamiento
• display: table-cell y cualquier valor relacionado con la tabla / inline-block
• posición: absoluta / fija

Answer 4

Respuesta muy simple para este problema que parece atrapar a mucha gente:

<img src="url-to-image">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
img {
float: left;
}
p {
overflow: hidden;
}

Ver ejemplo: http://jsfiddle.net/vandigroup/upKGe/132/

Answer 5

Si desea que el margin-left funcione en un elemento de span , necesitará hacer que se display: inline-block o display:block también.

Answer 6

display:flex configuración display:flex para el texto trabajado para mí.