Comment puis-je positionner deux divisions côte à côte, une division ayant une largeur fixe et l'autre s'agrandissant pour remplir l'espace restant ?

Placer deux divisions côte à côte en CSS

Lorsque vous travaillez avec HTML et CSS, la nécessité de positionner les éléments les uns à côté des autres est courant. Cet article se penche sur un scénario spécifique, où l'objectif est de créer deux divs adjacents horizontalement, l'un div étant contraint à une largeur spécifique tandis que l'autre occupe l'espace disponible restant.

Solution Flexbox

Les navigateurs modernes prennent en charge une propriété CSS appelée flexbox, qui fournit une méthode puissante pour disposer les éléments de manière flexible. Pour obtenir la mise en page souhaitée, pensez à utiliser flexbox. Voici un extrait de code qui illustre cette approche :

<div>

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
}
#wide {
  flex: 1;
  background: lightgreen;
}

Dans cet exemple :

• #parent est le div conteneur qui définit la disposition de la flexbox.
• #narrow a une largeur fixe de 200px.
• #wide est prêt à croître et à occuper le reste espace disponible sur l'écran, grâce à la propriété flex: 1.

En utilisant flexbox, vous pouvez facilement créer des div côte à côte sans avoir besoin de calculs de largeur complexes ou de règles CSS supplémentaires. Cette solution est à la fois concise et flexible, ce qui la rend adaptée à une gamme de scénarios.

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!