Lo siguiente es lo que traduje. Es una traducción gratuita basada en mi comprensión del artículo. No encuentres fallas en la traducción. Mi propósito es simplemente transmitir esta habilidad de CSS.
A muchos diseñadores web les gusta colocar dos o más contenedores uno al lado del otro con la misma altura y mostrar el contenido de cada contenedor en su interior, al igual que las celdas en el diseño de tabla clásico controlan la posición de varias columnas. También les gusta que el contenido del contenedor se muestre centrado. o alineado superior.
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?
<tabla>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tabla>
Aquí está el CSS:
.igual {
pantalla: tabla;
colapso de fronteras: separado;
}
.fila {
mostrar: fila de tabla;
}
.fila div {
pantalla: celda de tabla;
}
.fila .uno {
ancho: 200 px;
}
.fila .dos {
ancho: 200 px;
}
.fila .tres {
}
explicar: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.