Comment créer une mise en page à deux colonnes avec une colonne de droite à largeur fixe à l'aide de CSS ?

Création d'une mise en page à deux colonnes avec une colonne de droite à largeur fixe

Lors de la conception d'une mise en page de site Web, il est courant d'exiger deux colonnes , l'un avec une largeur fixe et l'autre avec une largeur fluide. Ceci peut être réalisé grâce à une combinaison de propriétés CSS et de structure HTML.

Pour commencer, il est essentiel de supprimer la propriété float de la colonne de gauche. Contrairement à la colonne de droite, qui nécessite un flottant et une largeur définie pour fixer sa position, la colonne de gauche doit rester flexible en largeur.

De plus, dans le code HTML, la colonne de droite doit être placé avant la colonne de gauche.

En appliquant une propriété overflow: Hidden et une valeur de hauteur (soit auto, soit une mesure spécifique) au div du conteneur, l'espace environnant enfermera les deux divs.

Enfin, pour assurer l'indépendance de la colonne de gauche par rapport à la colonne de droite à largeur fixe, il est nécessaire d'ajouter une propriété width: auto et overflow: caché. Cette combinaison permet à la colonne de gauche de se développer sans interférer avec la colonne de droite.

Pour illustrer cette disposition, considérons le code HTML et CSS suivant :

HTML :

<div class="container">
  <div class="right">
    Right content fixed width
  </div>
  <div class="left">
    Left content flexible width
  </div>
</div>

CSS :

.container {
  height: auto;
  overflow: hidden;
}

.right {
  width: 180px;
  float: right;
  background: #aafed6;
}

.left {
  float: none; /* not needed, just for clarification */
  background: #e8f6fe;
  /* the next props are meant to keep this block independent from the
  other floated one */
  width: auto;
  overflow: hidden;
}

Cette mise en page est efficace positionne la colonne de droite avec une largeur fixe sur le côté droit, tandis que la colonne de gauche reste flexible et s'ajuste à l'espace disponible.

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!