Deux blocs en ligne, largeur 50%, éléments en deuxième ligne

Je voudrais avoir deux colonnes de 50% de largeur et éviter les flotteurs. J’ai donc pensé utiliser display:inline-block .

Lorsque les éléments ajoutent 99% de largeur (par exemple 50%, 49%, http://jsfiddle.net/XCDsu/2/ ), cela fonctionne comme prévu.

Lorsque vous utilisez une largeur de 100% (par exemple 50%, 50%, http://jsfiddle.net/XCDsu/3/ ), la deuxième colonne passe à la deuxième ligne.

Pourquoi donc?

C’est parce que display:inline-block prend en compte les espaces blancs dans le HTML. Si vous supprimez les espaces blancs entre les div , cela fonctionne comme prévu. Exemple en direct: http://jsfiddle.net/XCDsu/4/

 
content
content

Vous pouvez supprimer les espaces blancs via css en utilisant des espaces blancs afin de conserver votre jolie mise en page HTML. N’oubliez pas de redéfinir les espaces blancs à nouveau si vous souhaitez que votre texte soit inséré dans les colonnes.

Testé dans IE9, Chrome 18, FF 12

 .container { white-space: nowrap; } .column { display: inline-block; width: 50%; white-space: normal; } 
text that can wrap
text that can wrap

REMARQUE: En 2016, vous pouvez probablement utiliser flexbox pour résoudre ce problème plus facilement.

Cette méthode fonctionne correctement avec IE7 + et tous les principaux navigateurs, elle a été testée et testée dans un certain nombre d’applications Web complexes.

  
text that can wrap
text that can wrap

Démo en direct: http://output.jsbin.com/sekeco/2

Le seul inconvénient de cette méthode pour IE7 / 8 repose sur le body {font-size:??px} comme base du dimensionnement des fonts basé sur em /%.

Le CSS spécifique à IE7 / IE8 peut être servi avec les commentaires conditionnels d’IE

inline et inline-block sont affectés par les espaces dans le code HTML.

La façon la plus simple de résoudre votre problème consiste à supprimer les espaces blancs entre et

, voir: http://jsfiddle.net/XCDsu/15/

Il existe d’autres solutions possibles, voir: bikeshedding CSS3 property alternative?

J’ai continué à avoir ce problème dans ie7 quand le navigateur était à certaines largeurs. Désactive les anciens navigateurs pour arrondir la valeur des pixels si le résultat en pourcentage n’est pas un nombre entier. Pour résoudre ce problème, vous pouvez essayer de définir

 overflow: hidden; 

sur le dernier élément (ou tous).