2011-05-25 13 views
11

No hay forma de que explique esto excepto para referirse al siguiente example on JS Fiddle - en él, el último cuadro AZUL no se extiende al 100% del ancho como se esperaba después de presentar un desbordamiento: atributo oculto.¿Se puede desbordar: diseño de afecto oculto?

Estaba bajo la influencia del desbordamiento: oculto afectaría aspectos de visibilidad solamente y no interferiría con el diseño. ¿Alguien puede explicar lo que está pasando en este ejemplo?

EDIT: Este problema parece limitarse a los navegadores WebKit (por ejemplo cromo)

+0

¿En qué navegador estás viendo estos problemas? Me parece bien en FF –

+1

estoy viendo lo que está señalando con cromo. probablemente webkit – corroded

+3

Nota al margen: no debe tener múltiples elementos con la misma ID, p. ej. azul y rojo. Sin embargo, eso no está causando este problema, que puedo ver en Chrome/Lin. – newtron

Respuesta

16

Es porque overflow: hidden, entre otras propiedades, introduce un nuevo block formatting context.

Usted puede leer acerca de los efectos de este gran artículo: The magic of overflow: hidden

ACTUALIZACIÓN: Herewritten your jsFiddle en algo que se está trabajando (probado en Chrome). En lugar de definir margin-left en #red y #blue (que actuaría de manera diferente debido a overflow: hidden), puse margin-right en #yellow.

+0

@ bazmegakapa- Impresionante- gracias por la dirección y la reescritura – Yarin

Cuestiones relacionadas