Disposition div_CSS/HTML comme un tableau

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

Ce qui suit est ce que j'ai traduit, qui est une traduction gratuite basée sur ma compréhension de l'article, je ne trouve rien à redire à la traduction, mon but est simplement de transmettre cette technique CSS

De nombreux concepteurs de sites Web aiment placer deux conteneurs ou plus côte à côte avec une hauteur égale et afficher chaque conteneur à l'intérieur Le contenu d'un conteneur est comme une cellule dans une disposition de tableau classique qui contrôle la position de plusieurs colonnes. Vous aimez également que le contenu du conteneur soit 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 réalisée 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 cela. Attributs, nous n'avons pas besoin de blâmer IE pour le moment, je pense qu'il sera amélioré à l'avenir. Ici, j'ai réalisé un modèle.

Premier aperçu de la structure du xhtml :

C'est très simple à comprendre sans explication, mais voici une structure de tableau, est-ce très similaire ?














Ce qui suit est le CSS :
.equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}
.row .one {
width:200px;
}
.row .two {
width:200px;
}
.row .trois {

}

Explication :
1.dispaly:table : laissez layer.equal être utilisé ; au niveau du bloc L'affichage du tableau de l'élément consiste à le traiter comme un tableau
2.border-collapse:separate; la bordure est indépendante, tout comme avant que le tableau n'ait fusionné les cellules
3.display:table-row ; traiter .row comme Table row tr display
4.display:table-cell; afficher le div de niveau inférieur de .row comme table cell td
5 Puis définir 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 peut être affiché sous : Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b et Netscape 7.1 après tests. Affichage parfait.Maintenant, toute la mission est terminée.