HTML5 + CSS3 Production de la page Web: largeur de mise en page adaptative à trois colonnes

Introduction de l'article de wulin.com (www.vevb.com): CSS3 + HTML5 Notes d'étude 4 - CSS à trois colonnes Adapt uniquement.

Dans le passé, lors de la mise en page à trois colonnes, la méthode la plus courante et la plus simple pourrait être: l'utilisation de la marge float + pour l'implémenter. À l'ère de CSS3, nous pourrions avoir une autre méthode à la mode, qui est le modèle de boîte dans CSS3, avec le code comme suit:

L'effet de fonctionnement sous Google Chrome est le suivant:

Résumé: L'attribut Box-Flex est principalement utilisé ici. Cet attribut permet principalement au conteneur enfant de diviser la largeur en fonction de certaines règles par rapport au conteneur parent. Si les trois conteneurs enfants définissent la valeur de la boîte-flex sur 1, 2 et 3 respectivement, les trois conteneurs enfants diviseront la largeur en fonction d'un rapport de 1: 2: 3.

Bien sûr, le conteneur parent doit être défini pour être un modèle de boîte pour voir l'effet, tel que l'affichage: -webkit-box; Affichage: -moz-box;

Cependant, si vous exécutez directement le code ci-dessus, il n'y a pas de problème dans Chrome, mais en ce qui concerne Firefox, il devient le suivant:

, est-ce un bug de Firefox? À l'origine, les largeurs sur les côtés gauche et droite étaient fixes, mais les largeurs au milieu n'avaient pas de largeur adaptative. Après avoir communiqué avec l'auteur de "Le Guide faisant autorité de HTML5 et CSS3", j'ai réalisé que cette situation se produit parce que la largeur du conteneur parent n'est pas définie. Ajoutez simplement la largeur: 100% au conteneur parent. . . Merci à l'auteur de "HTM5 et CSS3 Guide faisant autorité" ...