¿Puedo usar desbordamiento: oculto sin una altura explícita de alguna manera?

Tengo una imagen con float:left, y me gustaría desbordar a su elemento principal, pero cortar el desbordamiento. Esto es lo que parece que sin ningún overflow reglas:¿Puedo usar desbordamiento: oculto sin una altura explícita de alguna manera?

enter image description here

Esto es lo que quiero:

enter image description here

Aquí es un violín: http://jsfiddle.net/ZA5Lm/

For some reason, se decidió que overflow:hidden sin un explícitas resultados de altura en el elemento de crecimiento.

¿De alguna manera puedo lograr el efecto que deseo sin establecer una altura explícita? Una altura explícita no funciona porque quiero que este div se ajuste automáticamente en función de la longitud del contenido y el ancho del navegador.

Fuente

2012-03-30 Roman Starkov

¿Las imágenes tienen un ancho fijo? – Jon

'overflow: hidden' (o cualquier otro valor que' visible') hace que un cuadro cree un contexto de formato de bloque en el que contener flotantes. La expansión de la caja para que se ajuste a sus flotadores es solo uno de los efectos secundarios cuando la caja tiene 'height: auto' (sin altura explícita). No puedo encontrar ninguna explicación para * por qué * exactamente un 'desbordamiento' que no es 'visible' crea un BFC, pero lo hace. – BoltClock

¿Qué se supone que se debe hacer cuando cambia el tamaño de la ventana gráfica [como aquí] (http://jsfiddle.net/YvEcK/)? – user123444555621

En mi opinión, utilizar el desbordamiento: oculto sin establecer las dimensiones no tiene sentido. Si no desea especificar la altura del contenedor y si las imágenes tienen una anchura fija podría utilizar esta solución: http://jsfiddle.net/ZA5Lm/11/

La imagen se sitúa con absoluta, sacándolo del texto: fluir. Sin embargo, y soy consciente de que esto puede ser feo, debe especificar un margen izquierdo para alejar el texto de la imagen.

Fuente

2012-03-30 11:44:04

Gracias, creo que su solución será aceptable, lo intentaré y veré. Sin embargo, tengo curiosidad por saber por qué crees que el desbordamiento: oculto no tiene sentido sin un tamaño _explicit_. Tenga en cuenta que el elemento padre tiene un tamaño definido _independiente_ de si los tamaños se establecen explícitamente. –

Con elemento principal, ¿te refieres a ** div **? Su altura depende de su contenido (si no se especifica altura). El div no puede crecer con el texto e ignorar la altura de la imagen. el desbordamiento solo puede ocultarse cuando tiene un límite, por eso digo que no tiene sentido. –

Quiero decir el div. Sin desbordamiento: oculto _ crece_ con el texto e ignore la altura de la imagen. En esta situación, el div ha conocido fronteras, la imagen ha conocido fronteras, por lo que lo único que queda es intersecarlas y recortar la imagen en consecuencia. ¿No está esto perfectamente bien definido? –

He visto una publicación en CSS-Tricks y hablaba sobre esto. Ir echarle un vistazo en - http://css-tricks.com/minimum-paragraph-widths/

Podría ser útil :) Buena suerte

También acabamos de ver a su código y añade flotador: la derecha a su div para que se vea como esto -

div { 
border: 1px solid black; 
padding: 10px; 
float: right 
/*overflow: hidden;*/ 
}

¿No estás seguro si eso es lo que quieres?

Fuente

2012-03-30 11:27:58

Acabo de probar eso - no parece hacer que el resultado se vea como lo mostré en mi pregunta, lo que significa que no es lo que quiero :) –

Es un poco complicado (yo uso relativa + posicionamiento absoluto y un acolchado específico para colocar texto) pero tiene el efecto que pidió sin cambiar de marcas o establecer height:

body { 
    padding: 10px; 
} 
img { 
    float: left; 
    position: absolute; 
    left : 10px; 
} 
div { 
    border: 1px solid black; 
    padding: 10px 10px 10px 280px; 
    position : relative; 
    overflow: hidden; 
}

acabo de estilo insertada (incluso si float:left ya no es necesario)

Fuente

2012-03-30 11:49:34 fcalderan

¿Puedo usar desbordamiento: oculto sin una altura explícita de alguna manera?

Respuesta

Cuestiones relacionadas