Comment créer une mise en page à 2 colonnes avec une colonne de droite à largeur fixe et une colonne de gauche fluide ?

Disposition de division à 2 colonnes : colonne de droite à largeur fixe, fluide à gauche

Question :

Vous recherchez une solution pour créer une mise en page à deux colonnes avec une colonne de droite à largeur fixe et une colonne de gauche flexible. Malgré l'exploration des diverses approches suggérées, aucune n'a répondu à vos besoins spécifiques.

Réponse :

Pour réaliser l'aménagement souhaité, les modifications suivantes sont nécessaires :

1. Supprimer Float de la colonne de gauche : Supprimez la propriété float de la colonne de gauche. Sa largeur sera déterminée automatiquement.
2. Ordre inverse des colonnes en HTML : Dans votre code HTML, assurez-vous que la colonne de droite précède la colonne de gauche. Cela permet à la colonne de droite à largeur fixe d'établir sa largeur avant que la colonne de gauche fluide ne s'ajuste.
3. Ajouter un débordement et une hauteur à la division externe : Appliquer un débordement : propriété cachée et une hauteur spécifique ou hauteur automatique à la div externe. Cela garantit qu'il encapsule les deux divs internes.
4. Configurez le CSS de la colonne de gauche : Pour la colonne de gauche, ajoutez width : auto et overflow : caché. Ces propriétés maintiennent la colonne de gauche indépendante de la colonne de droite à largeur fixe.

Exemple HTML et CSS :

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

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

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

.left {
  float: none;
  background: #e8f6fe;
  width: auto;
  overflow: hidden;
}

En implémentant ces ajustements, vous pouvez créer la disposition à deux colonnes souhaitée avec une colonne de droite à largeur fixe et une colonne de gauche fluide.

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!