A muchos diseñadores web les gusta colocar dos o más contenedores uno al lado del otro a la misma altura y mostrar el contenido de cada contenedor en su interior, al igual que las celdas en un diseño de tabla clásico que controla las posiciones de varias columnas. También les gusta la conveniencia de los contenedores. El contenido se muestra centrado o alineado superiormente.
Pero no te gusta usar tablas para implementarlo, entonces, ¿qué deberías hacer? Hay muchas formas de implementarlo, incluida la implementación basada en ilusiones visuales, usando el control JS para igualar las alturas y usando un método para ocultar la parte desbordante del contenedor y combinar el límite inferior negativo de la columna y el interior positivo. parche para resolver el problema de la misma altura de columna.
De hecho, existe un método simple que se puede lograr usando display:table, display:table-row y display:table-cell, y los contenedores con alturas pequeñas se adaptarán a aquellos con alturas relativamente altas, pero IE no lo admite. este atributo. No culpamos a IE por ahora, creo que mejorará en el futuro. Aquí hice un modelo.
Primero veamos la estructura de xhtml:
| ＜div clase="igual"＞ ＜div clase="fila"＞ ＜div clase="uno"＞＜/div＞ ＜div clase="dos"＞＜/div＞ ＜div clase="tres"＞＜/div＞ ＜/div＞ ＜/div＞ |
Es muy sencillo de entender sin explicación, pero aquí hay una estructura de tabla, ¿es muy similar?
| ＜tr＞ ＜td＞＜/td＞ ＜td＞＜/td＞ ＜td＞＜/td＞ ＜/tr＞ ＜/mesa＞ |
Aquí está el CSS:
igual { } |
1.dispaly:table; Deje que Layer.equal se muestre como una tabla de elementos a nivel de bloque, es decir, trátelo como una tabla.
2.border-collapse:separate; El borde es independiente, al igual que antes de que la tabla fusionara las celdas.
3.display:table-row; muestra .row como fila de tabla tr
4.display:table-cell; muestra el div subordinado de .row como celda de tabla td
5. Luego define el ancho.
Border-spacing:10px; también se usa aquí para distinguir varios cuadros. Como se indicó anteriormente, no se puede mostrar normalmente en IE, pero es: Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8. b, y Netscape 7.1 se puede visualizar perfectamente después de la prueba.