2011-03-14 10 views
6

Tengo dos <div> dentro de un padre <div>. Los interiores tienen un estilo sin padding, border o margin y width:50%; display:inline-block;. El exterior <div> tampoco tiene padding, etc. Firebug muestra que el exterior <div> tiene un ancho de 1240px, y cada interno es de 620px. Entonces, ¿por qué aparecen uno debajo del otro y no uno al lado del otro? Si bajé su ancho a 618px, funciona. ¿Huh?El ancho de CSS no suma

+3

¿Qué le parece mostrarnos la página o [jsfiddle] (http://jsfiddle.net)? –

+5

620px + 620px + un espacio (blanco) carácter> 1240px – Michas

+0

@Matt Ball +1 jsFiddle es tan increíble! –

Respuesta

9

display:inline-block es un inconveniente en la forma en que se toman en consideración los espacios en blanco de marcado al dibujar los elementos, AFAIK. Intente establecer font-size:0 en el elemento primario si no tiene ningún otro texto, y configure el font-size deseado para los elementos secundarios.

P.S., primero intente eliminar el espacio en blanco en el margen entre los elementos, para ver si eso corrige el problema.

+0

¡Eso es todo! Gracias. – baruch

0

Parece una solución bastante simple, si tiene dos bloques, A y B y son del mismo tamaño y los está mirando directamente y están perfectamente alineados, verá solo un bloque.

Está tratando de hacer algo que no se ajuste dentro del contenedor. Ya ha resuelto el tamaño de su problema, el contenedor hacia arriba o el contenido hacia abajo ligeramente para unirlos.

Cuestiones relacionadas