Voici ce que j'ai traduit. Il s'agit d'une traduction gratuite basée sur ma compréhension de l'article. Ne trouvez pas à redire à la traduction. Mon objectif est simplement de transmettre cette compétence CSS.
De nombreux concepteurs Web aiment placer deux conteneurs ou plus côte à côte avec une hauteur égale et afficher le contenu de chaque conteneur à l'intérieur, tout comme les cellules de la disposition de tableau classique contrôlent la position de plusieurs colonnes. Ils aiment également que le contenu du conteneur soit 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 :
<classe div = égal>
<div classe=ligne>
<div class=one></div>
<div class=deux></div>
<div class=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>
</table>
Voici le css :
.égal {
affichage:tableau;
border-collapse:séparé;
}
.rangée {
display:table-ligne;
}
.row div {
display:table-cellule;
}
.ligne .un {
largeur : 200 px ;
}
.ligne .deux {
largeur : 200 px ;
}
.ligne .trois {
}
expliquer: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.