css - deux inline-block, largeur 50% éléments ne s'empilent pas

Question

Je voudrais avoir deux colonnes de 50% de largeur et éviter les flotteurs. Donc j'ai pensé en utilisant display:inline-block .

Lorsque les éléments s'ajoutent à 99% de la 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?

Answer 1

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

 <div id="col1">content</div><div id="col2">content</div>
 

Answer 2

Vous pouvez supprimer les espaces blancs via css en utilisant des espaces pour conserver votre jolie mise en page HTML. N'oubliez pas de redonner à l'espace blanc son aspect normal si vous souhaitez que votre texte soit placé à l'intérieur des colonnes.

Testé dans IE9, Chrome 18, FF 12

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

<div class="container">
  <div class="column">text that can wrap</div>
  <div class="column">text that can wrap</div>
</div>
 

Answer 3

Cette méthode fonctionne correctement IE7+, et tous les principaux navigateurs, il a été essayé et testé dans un certain nombre de complexes fenêtre d'affichage basé sur des applications web.

<style>
    .container { 
    font-size:0}

    .column { 
    display: inline-block; 
    width: 50%; 
    font-size:16px; /* or whatever would normally be inherited
    (twitter bootstrap resets body font-size to 13px, for example) */}

    /* Serve this to IE7 _only_: */
    .ie7 .column {
    display:inline; 
    zoom:1}

</style>

<div class="container">
  <div class="column">text that can wrap</div>
  <div class="column">text that can wrap</div>
</div>

Démonstration en direct: http://jsbin.com/openuh/2

Le seul inconvénient de cette méthode, c'est quand en s'appuyant sur body {font-size:??px} comme base pour em/%-en fonction de police-dimensionnement.

IE7 CSS spécifique pourrait être servi à l'aide d'IE les commentaires Conditionnels

Answer 4

inline et inline-block des éléments sont affectés par des espaces dans le code HTML.

La façon la plus simple de résoudre le problème est de supprimer les espaces entre </div> et <div id="col2">, voir: http://jsfiddle.net/XCDsu/15/

Il y a d'autres solutions possibles, voir: bikeshedding propriété CSS3 alternative?

Answer 5

J'ai continué à avoir ce problème dans ie7 lorsque le navigateur était à certaines largeurs. Les anciens navigateurs arrondissent la valeur du pixel à la hausse si le pourcentage de résultat n'est pas un nombre entier. Pour résoudre ce problème, vous pouvez essayer de régler

 overflow: hidden;
 

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