De nombreux concepteurs de sites Web aiment placer deux conteneurs ou plus côte à côte à des hauteurs égales et afficher le contenu de chaque conteneur à l'intérieur, tout comme les cellules d'un tableau classique qui contrôlent la position de plusieurs colonnes. Ils apprécient également la commodité des conteneurs. Le contenu est affiché centré ou aligné en haut.
Mais vous n’aimez pas utiliser des tables pour l’implémenter, alors que devez-vous faire ? Il existe de nombreuses façons de l'implémenter, notamment en l'implémentant sur la base d'illusions visuelles, en utilisant le contrôle JS pour rendre les hauteurs égales, et en utilisant une méthode permettant de masquer la partie de débordement du conteneur et de combiner la limite inférieure négative de la colonne et la limite intérieure positive. patch pour résoudre le problème de la même hauteur de colonne.
En fait, il existe une méthode simple, qui peut être obtenue en utilisant display:table, display:table-row et display:table-cell, et les conteneurs de petite hauteur s'adapteront à ceux de hauteur relativement élevée, mais IE ne prend pas en charge cet attribut. Nous ne blâmons pas IE pour l'instant, je pense que cela s'améliorera à l'avenir. Ici, j'ai réalisé un modèle.
Examinons d'abord la structure de xhtml :
| ＜div classe="égal"＞ ＜div classe="ligne"＞ ＜div classe="un"＞＜/div＞ ＜div classe="deux"＞＜/div＞ ＜div classe="trois"＞＜/div＞ ＜/div＞ ＜/div＞ |
C'est très simple à comprendre sans explication, mais voici une structure de tableau, est-elle très similaire ?
| <tableau> ＜tr＞ ＜td＞＜/td＞ ＜td＞＜/td＞ ＜td＞＜/td＞ ＜/tr＞ ＜/tableau＞ |
Voici le css :
égal { } |
1.dispaly:table; Laissez layer.equal être affiché comme un tableau d'éléments au niveau du bloc, c'est-à-dire le traiter comme un tableau
2.border-collapse:separate; La bordure est indépendante, tout comme avant la fusion des cellules du tableau.
3.display:table-row; affiche .row comme ligne de tableau tr
4.display:table-cell ; affiche le div subordonné de .row sous forme de cellule de tableau td
5. Définissez ensuite la largeur
Border-spacing:10px; est également utilisé ici pour distinguer plusieurs cases. Comme indiqué ci-dessus, il ne peut pas être affiché normalement sous IE, mais il l'est : Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8. b, et Netscape 7.1 peut être parfaitement affiché après les tests.