Pourquoi mes colonnes de blocs en ligne de 50 % de largeur passent-elles à la ligne suivante ?

Enveloppement d'éléments en blocs en ligne : un problème de largeur

Lors de la création d'une mise en page à deux colonnes avec 50 % de largeur pour chaque colonne, beaucoup optent pour l'affichage : approche en ligne pour éviter les problèmes potentiels avec float. Cependant, lorsque l’on utilise une largeur de 100 % pour les deux colonnes, un scénario déroutant apparaît. La deuxième colonne semble s'interrompre jusqu'à la deuxième ligne.

La cause sous-jacente

Le coupable derrière ce comportement réside dans la prise en compte par HTML des caractères d'espacement par display: inline -bloc. Lorsqu'un caractère espace sépare les deux éléments div, le navigateur interprète cet espace comme une largeur supplémentaire, provoquant le retour à la ligne de la deuxième colonne.

La solution

Pour résoudre ce problème , éliminez les espaces blancs entre les éléments div. Cela garantit que le calcul de leur largeur combinée est précis, sans ajout d’espace supplémentaire. Le HTML ajusté ressemblerait à :

<div>

Avec cette simple modification, les deux colonnes occupent désormais 100% de largeur, restant côte à côte sur la même ligne.

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!