Pourquoi deux éléments de bloc en ligne de 50 % de largeur s'enroulent-ils sur la ligne suivante ?

Deux éléments de bloc en ligne avec une largeur de 50 % passant à la deuxième ligne

Lorsque vous essayez de créer deux colonnes avec une largeur égale de 50 % à l'aide de display:inline-block, c'est observé que si la largeur totale des éléments dépasse 99%, la deuxième colonne passe à la ligne suivante. Ce comportement peut sembler contre-intuitif.

Comprendre le problème

La raison de ce comportement réside dans la façon dont display:inline-block interagit avec les espaces en HTML. Les espaces, tels que les sauts de ligne, les tabulations et les espaces, sont réduits par display:inline-block. Cela signifie que lorsqu'il y a un espace entre les éléments du bloc en ligne, il est traité comme un espace unique et les éléments sont effectivement positionnés les uns à côté des autres.

Lorsque la largeur totale des éléments du bloc en ligne dépasse 100 %, il n'y a plus d'espace restant pour accueillir les espaces. En conséquence, la deuxième colonne est obligée de passer à la ligne suivante.

Solution : suppression des espaces

Pour résoudre ce problème, il est nécessaire de supprimer les espaces entre les éléments du bloc en ligne. . Ceci peut être réalisé en utilisant le code HTML suivant :

<div>

En concaténant les divs sans aucun espace, les éléments display:inline-block sont effectivement placés côte à côte, sans aucun espace entre eux. Cela garantit qu'ils s'enroulent correctement dans la largeur du conteneur.

Avec cet ajustement, les deux éléments de bloc en ligne conserveront une largeur de 50 % et ne s'enrouleront pas sur une deuxième ligne, même lorsque leur largeur totale dépasse 100 % .

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!