Comment puis-je diviser l'espace proportionnellement entre deux divisions avec une largeur fixe ?

Deux Divs, divisant l'espace proportionnellement

Dans une page Web, vous pouvez rencontrer un scénario dans lequel vous avez deux conteneurs div, l'un avec une largeur fixe et l'autre qui devrait occuper l’espace disponible restant. La configuration efficace de cette configuration peut être essentielle pour une conception de mise en page réactive.

Pour y parvenir, vous pouvez utiliser diverses techniques CSS. Voici deux méthodes couramment utilisées :

Méthode 1 : Définition des propriétés de largeur

Définissez une largeur spécifique pour le div à largeur fixe et utilisez la fonction calc() pour calculer la largeur de l'autre div en conséquence. Assurez-vous que les valeurs de la fonction calc() prennent en compte la largeur du div à largeur fixe, les marges ou le remplissage éventuels et la proportion souhaitée de l'espace restant.

Méthode 2 : utilisation de Display:table et Display:table-cell

Exploitez les propriétés display: table et display: table-cell pour créer une disposition de type tableau. Définissez la propriété width pour le div à largeur fixe et ajustez la largeur de l’autre div en spécifiant une valeur en pourcentage. La valeur en pourcentage déterminera la proportion de l'espace restant qu'elle devrait occuper.

Exemple de code :

Référez-vous à l'exemple de code HTML et CSS ci-dessous, où le bon div (avec la classe à droite) a une largeur fixe de 250px et le div gauche (avec la classe à gauche) occupe l'espace restant.

HTML :

<code class="html"><div class="left"></div>
<div class="right"></div></code>

CSS :

<code class="css">.left {
  overflow: hidden;
  min-height: 50px;
  border: 2px dashed #f0f;
}

.right {
  float: right;
  width: 250px;
  min-height: 50px;
  margin-left: 10px;
  border: 2px dashed #00f;
}</code>

En utilisant ces techniques, vous pouvez diviser efficacement l'espace entre deux conteneurs div, vous permettant ainsi de créer des mises en page Web flexibles et réactives.

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!