Utilisez div pour implémenter une méthode de mise en page de type tableau_Experience Exchange

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'une disposition de tableau classique contrôlent les positions de plusieurs colonnes. 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 ces 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.

Jetons d'abord un coup d'œil à la structure du xhtml :

C'est facile à 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 le calque .equal être affiché sous forme de tableau ; des éléments au niveau du bloc, c'est-à-dire, traitez-le comme un tableau
2.border-collapse:separate; La bordure est indépendante, tout comme le tableau avant la fusion des cellules
3.display:table-row; afficher .row comme ligne de tableau tr
4.display:table-cell; afficher le div subordonné de .row comme cellule de tableau td
5. Définissez ensuite la largeur

Border-spacing:10px; 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. peut être parfaitement affiché après le test

.