Introducción al artículo de Wulin.com (www.vevb.com): CSS3+HTML5 Notas de estudio 4-El ancho de diseño de tres columnas de CSS solo se adapta.
En el pasado, al hacer un diseño de tres columnas, el método más común y más simple podría ser: usar Float+Margen para implementarlo. En la era de CSS3, podríamos tener otro método de moda, que es el modelo de caja en CSS3, con el código de la siguiente manera:
Diseño de tres columnas CSS3 CSS3 Diseño de tres columnas MiddleleftrightEl efecto de operación en Google Chrome es el siguiente:
Resumen: el atributo de flexión de caja se usa principalmente aquí. Este atributo permite principalmente el contenedor infantil dividir el ancho de acuerdo con ciertas reglas en relación con el contenedor principal. Si los tres contenedores infantiles establecen el valor de flexión de caja en 1, 2 y 3 respectivamente, los tres contenedores infantiles dividirán el ancho de acuerdo con una relación de 1: 2: 3.
Por supuesto, el contenedor principal debe establecerse para ser un modelo de caja para ver el efecto, como la pantalla: -webkit-box; Display: -Moz-Box;
Sin embargo, si ejecuta el código anterior directamente, no hay problema en Chrome, pero cuando se trata de Firefox, se convierte en lo siguiente:
, ¿es este un error de Firefox? Originalmente, los anchos en los lados izquierdo y derecho eran fijos, pero los anchos en el medio no tenían un ancho adaptativo. Después de comunicarse con el autor de "La Guía autorizada de HTML5 y CSS3", me di cuenta de que esta situación ocurre porque el ancho del contenedor principal no está establecido. Simplemente agregue ancho: 100% al contenedor principal. . . Gracias al autor de "HTM5 y CSS3 Guía de autoridad" ...