Comment puis-je réaliser des divisions côte à côte avec une largeur fixe et l'autre remplissant l'espace restant à l'aide de CSS ?

Réalisation de divisions côte à côte en CSS

Lorsque vous essayez d'organiser plusieurs divisions horizontalement, le défi de les aligner de manière transparente peut survenir. Cet article fournit une solution en utilisant CSS flexbox pour obtenir une mise en page optimale qui maximise l'utilisation des pages.

Problème :

L'objectif est de positionner deux divs côte à côte, avec un div conservant une largeur fixe de 200 px, tandis que l'autre div remplit dynamiquement l'écran restant space.

Solution :

La clé de cette mise en page est flexbox, une propriété CSS puissante qui permet une disposition flexible des éléments. Voici comment l'implémenter :

1. Créez un div parent et définissez sa propriété d'affichage sur flex :

   #parent {
     display: flex;
   }

2. Définissez le div à largeur fixe et spécifiez son width:

   #narrow {
     width: 200px;
     background: lightblue; /* Just for visibility */
   }

3. Ajouter flex: 1 à l'autre div:

   #wide {
     flex: 1; /* Grows to fill remaining space */
     background: lightgreen; /* Just for visibility */
   }

En utilisant flexbox, vous pouvez créer une mise en page dynamique et flexible où les divs sont positionnés côte à côte, optimisant ainsi l'écran disponible. espace.

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!