2011-03-14 4 views
6

J'ai deux <div> s dans un parent <div>. Les deux intérieurs sont dénommés sans padding, border ou margin et width:50%; display:inline-block;. L'extérieur <div> n'a pas non plus padding, etc. Firebug montre l'extérieur <div> pour être de la largeur de 1240px, et chaque interne pour être 620px. Alors, pourquoi apparaissent-ils l'un en dessous de l'autre et pas côte à côte? Si je baisse leur largeur à 618px, cela fonctionne. Huh?La largeur CSS ne s'additionne pas

+3

Que diriez-vous de nous montrer la page, ou un [jsfiddle] (http://jsfiddle.net)? –

+5

620px + 620px + un espace (blanc) caractère> 1240px – Michas

+0

@Matt Ball +1 jsFiddle est tellement génial! –

Répondre

9

display:inline-block est gênant dans la façon dont il prend en compte l'espace de balisage lors du dessin des éléments, AFAIK. Essayez de définir font-size:0 sur l'élément parent s'il ne contient aucun autre texte et définissez le font-size souhaité pour les éléments enfants. P.S., essayez d'abord d'éliminer l'espace blanc dans le balisage entre les éléments, pour voir si cela corrige le problème.

+0

C'est tout! Merci. – baruch

0

Cela ressemble à une solution assez simple, si vous avez deux blocs, A et B et ils sont exactement la même taille et vous les regardez tout droit et ils sont alignés parfaitement, vous ne verrez qu'un seul bloc.

Vous essayez de créer un affichage qui ne rentre pas dans le conteneur. Vous avez déjà résolu votre problème de taille du conteneur ou le contenu vers le bas pour les adapter ensemble.

Questions connexes