Comment créer une mise en page HTML/CSS stable à deux colonnes avec réglage dynamique de la hauteur ?

Affiner une mise en page HTML/CSS stable à deux colonnes

Introduction :

La conception d'une mise en page stable à deux colonnes en HTML/CSS nécessite un examen attentif de plusieurs facteurs, notamment les dimensions des colonnes, l'ajustement de la hauteur, et la résilience de la mise en page face aux changements et aux variations de contenu.

Exigences spécifiques :

La mise en page doit satisfaire aux exigences suivantes :

• Largeur et la hauteur s'ajuste automatiquement.
• La hauteur du conteneur correspond à la plus grande hauteur des deux colonnes.
• Conteneur minimum la taille est le double de la largeur de la colonne de gauche.
• Les colonnes sont alignées verticalement et ont des hauteurs variables.
• Les dimensions et la disposition des colonnes restent stables même avec des bordures, un remplissage ou des ajustements de marge.
• La colonne de gauche a une largeur de pixel fixe.
• La largeur de la colonne de droite remplit l'espace restant du conteneur, permettant aux éléments de bloc de 100 % de largeur de s'étendre dans son intégralité.

Solution :

Structure HTML :

<div>

Style CSS :

#left {
  width: 200px;
  float: left;
}
#right {
  margin-left: 200px;
}
.clear {
  clear: both;
}

Cette approche utilise des flotteurs CSS pour positionner les colonnes côte à côte et un hack clearfix (.clear) pour empêcher les colonnes flottantes de réduire la hauteur du conteneur. La marge gauche sur la colonne de droite garantit qu'elle occupe l'espace restant dans le conteneur.

Avantages :

• Maintient une disposition et des dimensions de colonne stables.
• La hauteur du conteneur s'ajuste dynamiquement en fonction de la hauteur des colonnes.
• Gère le contenu variable et les modifications de mise en page. gracieusement.
• Compatible avec les principaux navigateurs, notamment IE8, Firefox 4 et Safari 5.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!