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

Mise en page Div à 2 colonnes : obtenir une colonne de droite à largeur fixe et une colonne de gauche fluide

Défi :

Créer une disposition à deux colonnes où la colonne de droite a une largeur fixe tandis que la colonne de gauche s'ajuste dynamiquement à la largeur disponible space.

Code fourni :

Le code fourni tente d'implémenter la mise en page en utilisant float et margin, mais rencontre des problèmes.

Solution :

Pour établir une colonne de droite à largeur fixe tout en conservant une fluidité dans la colonne de gauche, suivez ces directives :

1. Supprimer le flotteur dans la colonne de gauche : Supprimez la propriété float de la colonne de gauche (#content).
2. Réorganiser les colonnes HTML : Placez la colonne de droite (#right) avant la colonne de gauche dans le code HTML. Cela garantit que la largeur de la colonne de droite est appliquée en premier.
3. Appliquer le débordement à la division externe : Ajoutez un débordement : caché et une hauteur (par exemple, hauteur : auto) à la div externe (div. récipient). Cela empêche les divs internes de déborder du conteneur.
4. Définir la largeur et le débordement de la colonne de gauche : Définissez la largeur de la colonne de gauche sur auto et ajoutez le débordement : caché. Cela permet à la colonne de remplir l'espace restant et empêche l'interaction avec la colonne de droite.

Exemple Code :

HTML :

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

CSS :

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

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

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

Démo :

Visitez [ce JsFiddle](https://jsfiddle.net/jackJoe/fxWg7/) pour une démonstration fonctionnelle.

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!