La imagen va más allá de los límites del contenedor div

3 minutos de lectura

avatar de usuario
jake wilson

¿Alguien puede echar un vistazo al siguiente violín? http://jsfiddle.net/R4bCy/1/

Pensé que un div debería ajustar su altura para acomodar sus elementos, a menos que los elementos estén posicionados de manera absoluta.

¿Por qué el div no se expande a la altura completa de la imagen?

Necesito que la imagen esté alineada a la derecha. Las únicas formas en que sé cómo hacer esto es align='right', position:absolute; right: 0; y float:righttodo lo cual hace que el div contenedor no ajuste su altura a la altura de la imagen.

  • Parece estar funcionando bien para mí…

    – Miguel

    2 oct 2012 a las 18:05

  • ¿El contenedor rojo contiene completamente el texto y la imagen para usted?

    –JakeWilson

    2 oct 2012 a las 18:06

  • El contenedor rojo contiene completamente el texto y la imagen para mí en Chrome…

    – P. J. McCormick

    2 oct 2012 a las 23:24

avatar de usuario
Afshin

.intro {
margin: 10px;
outline: 1px solid #CCC;
background: #A00;
color: #FFF;
height:auto;
overflow:auto;
}
​.img{
float:right;
height:auto;
}​

<div class="intro">
    <div class="img"> <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s1600/tall+copy.jpg"    style="margin: 10px 10px; "/></div>

  <p>Sorry, but the page you requested could not be found.</p>
</div>​​​​​​​​​​

MANIFESTACIÓN

  • Esto también funcionó para mi problema. Esta debería ser la respuesta.

    – SpyrosKo

    25 de mayo de 2019 a las 2:04

avatar de usuario
remolcar

‘¿Por qué el div no se expande a la altura completa de la imagen?’

Debido a que los flotantes se superpondrán con los bloques, solo los contextos de formato de bloque contienen flotantes. (Puede encontrar una muy buena descripción general de todo el tema aquí: http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/ )

On para resolver el problema en cuestión:

los align=right en realidad dará como resultado que img sea float: right (la align atributo está en desuso y se debe usar css).

Para contener la imagen flotante en su padre div necesitas tener el padre div establecer un contexto de formato de bloque (los contextos de formato de bloque encierran flotantes anidados) o borrar explícitamente el flotante con un elemento adicional después del img que está diseñado como un clear: right.

Una solución fácil para crear un contexto de formato de bloque es hacer flotar el padre div también, aunque mi solución preferida en este caso sería simplemente establecer su overflow a hidden (que también da como resultado un contexto de formato de bloque).

Echa un vistazo al violín actualizado http://jsfiddle.net/R4bCy/8/.

Lo que debe hacer es agregar después de la etiqueta p,

<div style="clear:both;"></div>

Vaya, disculpas, publicó y editó su pregunta: creo que la alineación a la derecha está flotando (en su lugar, debe usar float: right y un arreglo claro de algún tipo).

ejemplo: http://jsfiddle.net/R4bCy/5/

Esto es lo que creo que quieres:
http://jsfiddle.net/R4bCy/6/

Si quería el texto a la izquierda y la imagen flotaba a la derecha, haga este es su CSS:
http://jsfiddle.net/R4bCy/15/

También puedes tener dos divs que tienen un ancho del 50% contenidas dentro de un contenedor div. Esto le permitirá un poco más de flexibilidad en la colocación de la imagen porque el texto y la imagen tendrán cada uno su propio modificable divs con atributos independientes

¿Ha sido útil esta solución?