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

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

Dans la conception Web, il est souvent nécessaire de créer une mise en page avec deux colonnes, dont l'une a une largeur fixe tandis que l'autre est fluide. Bien qu'il s'agisse d'une exigence courante, trouver une solution qui fonctionne de manière cohérente peut s'avérer difficile.

Dans ce cas spécifique, l'objectif est de créer deux colonnes où la colonne de droite conserve une largeur constante tandis que la colonne de gauche s'agrandit ou se contracte en fonction. sur l'espace disponible. Voici une réponse étape par étape :

1. Supprimer Float de la colonne de gauche : La suppression de la propriété float sur la colonne de gauche lui permet de circuler naturellement.
2. Déplacer la colonne de droite avant la colonne de gauche : Dans le HTML, la colonne de droite doit précéder celle de gauche un.
3. Définir la largeur et le flottement sur la colonne de droite : Définissez une largeur fixe pour la colonne de droite et appliquez-lui un flotteur (par exemple, float : right).
4. Ajouter un débordement et une hauteur à la division externe : Appliquer un débordement : caché et une hauteur (peut être automatique) à la div externe contenant les deux internes colonnes.
5. Ajouter une largeur et un débordement automatiques à la colonne de gauche : Définissez la largeur de la colonne de gauche sur automatique et appliquez un débordement : masqué. Cela garantit son indépendance par rapport à la colonne de droite.

Exemple 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;
  background: #e8f6fe;
  width: auto;
  overflow: hidden;
}

Cette solution crée la disposition souhaitée à deux colonnes avec une colonne de droite à largeur fixe tout en permettant à la colonne de gauche de s'ajuster dynamiquement en fonction de la taille de la fenêtre du navigateur.

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!