Deux éléments de bloc en ligne, chacun d’une largeur de 50%, ne sont pas alignés côte à côte dans une seule rangée

   Width issue  body { margin: 0; } #left { width: 50%; background: lightblue; display: inline-block; } #right { width: 50%; background: orange; display: inline-block; }    
Left

JSFiddle: http://jsfiddle.net/5EcPK/

Le code ci-dessus essaie de placer le div #left et le div #right, côte à côte, dans une seule ligne. Mais comme vous pouvez le voir dans l’URL JSFiddle ci-dessus, ce n’est pas le cas.

Je suis en mesure de résoudre le problème en réduisant la largeur de l’un des divs à 49%. Voir http://jsfiddle.net/mUKSC/ . Mais ce n’est pas une solution idéale car un petit écart apparaît entre les deux divisions.

Une autre façon de résoudre le problème consiste à faire flotter les deux divs. Voir http://jsfiddle.net/VptQm/ . Cela fonctionne bien.

Mais ma question initiale rest. Pourquoi, lorsque les deux divs sont conservés en tant qu’éléments de bloc en ligne, ils ne correspondent pas côte à côte?

Lorsque vous utilisez inline-block éléments inline-block , il y aura toujours un problème d’ whitespace entre ces éléments (cet espace fait environ 4px de large).

Donc, vos deux divs , qui ont tous deux 50% de largeur, plus cet whitespace (~ 4px), ont plus de 100% de largeur, et donc ils se brisent. Exemple de votre problème:

 body{ margin: 0; /* removing the default body margin */ } div{ display: inline-block; width: 50%; } .left{ background-color: aqua; } .right{ background-color: gold; } 
 
foo
bar

bonne réponse dans CSS3 est la suivante:

 white-space: nowrap; 

dans le nœud parent et:

 white-space: normal; vertical-align: top; 

en div (ou autre) à 50%

exemple: http://jsfiddle.net/YpTMh/19/

MODIFIER:

il y a un autre moyen avec:

 font-size: 0; 

pour le noeud parent et le remplacer dans le noeud enfant

C’est parce que les espaces entre vos deux divs sont interprétés comme un espace. Si vous placez vos balises

comme indiqué ci-dessous, le problème est corrigé :

 

Parce qu’il y a un espace entre les éléments. Si vous supprimez tous les espaces, ils conviendront .

 
Left

Soit les faire bloquer au lieu de bloc-ligne. Cela rendra les divs en ignorant les espaces entre eux.

 display:block; 

ou supprimer de l’espace entre les balises

 

ou append

 margin: -1en; 

à l’un des divs afin d’atténuer l’espace pris par un seul espace rendu.

Cela peut être fait en ajoutant l’affichage css: inline au div qui contient les éléments en ligne.

Tout en supprimant l’espace blanc en utilisant une marge avec une valeur négative, il devient nécessaire de l’append à cet élément particulier. Comme l’append à une classe affectera les endroits où cette classe a été utilisée.

Il serait donc plus sûr d’utiliser display: inline;