Eléments de niveau bloc dans l'affichage: inline-block

StackOverflow https://stackoverflow.com/questions/608172

  •  03-07-2019
  •  | 
  •  

Question

J'essaie de placer des éléments display: block (empilés verticalement) dans un élément display: inline-block. Selon la spécification CSS, l'élément inline-block doit être un bloc conteneur afin qu'il puisse contenir les éléments display: block qui ne devraient pas affecter le reste de la présentation.

Cependant, les éléments display: block à l'intérieur de display: les éléments inline-block perturbent le reste de la page; il en va de même de n'avoir rien du tout dans le bloc en ligne, ni même un élément de base comme un paragraphe; seul le texte simple évite de perturber le reste de la page (par perturbation, je veux dire décaler les autres divs, par exemple, dans ce cas, le bloc rouge de gauche descend le long d’une ligne et est précédé d’un espace blanc). J'utilise Firefox 3.0.6. 

<html><head><style type="text/css">
#left {
  display: inline-block;
  background: red;
  width: 20%;
  height: 100%;
}
#right {
  display: inline-block;
  background: green;
  width: 80%;
  height: 100%;
}
</style></head><body>
  <div id="left">Left</div><div id="right">Right</div>
</body></html>

L’affichage ci-dessus est présenté sous forme de deux volets, à gauche en rouge et à droite en vert, comme prévu. Si je change de & Quot; Right & Quot; à 

<p>Right</p>

ou supprimez-le complètement, ou (comme je veux le faire), remplacez-le par quelques divs, je reçois le mauvais format.

Est-ce un bug de Firefox, ou est-ce que je fais quelque chose de mal ou mes attentes sont-elles incorrectes? (FWIW, IE 7 les modifie tous de la même manière, comme s'ils ne comprenaient pas inline-block; cela n'a pas d'importance, c'est une application interne. Et je n'utilise que Firefox). Je pourrai peut-être obtenir la mise en page souhaitée avec float / margin, mais je préférerais ne pas avoir à le faire.

Était-ce utile?

La solution

Bien afficher: bloc en ligne peut être un peu difficile à obtenir pour plusieurs navigateurs. Il faudra au minimum quelques piratages et, éventuellement, un élément supplémentaire pour Firefox 2.

CSS 

.inlineBlock { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; }

display: -moz-inline-stack est destiné à Firefox 2. Tous les enfants immédiats devront disposer de display: block ou être autrement des éléments de niveau bloc. Notez que si vous avez besoin que votre élément inline-block rétrécisse, je pense que vous pouvez utiliser display: -moz-inline-box à la place.

zoom: 1 donne hasLayout à l'élément (pour IE 7 et inférieur). La première partie du hack nécessaire à la compatibilité avec IE7 et au-dessous.

** display: inline * est une deuxième partie du hack nécessaire à la compatibilité IE7 et inférieure.

J'ai parfois besoin d'ajouter un débordement: masqué pour la compatibilité avec IE.

Pour votre situation spécifique, je pense que ce dont vous avez besoin est: 

<html><head><style type="text/css">
#left {
  display: inline-block;
  background: red;
  width: 20%;
  height: 100%;
  vertical-align: top;
}
#right {
  display: inline-block;
  background: green;
  width: 80%;
  height: 100%;
  vertical-align: top;
}
</style></head><body>
  <div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>
</body></html>

Autres conseils

  

Je reçois le mauvais formatage.

Vous êtes mordu par réduction de la marge , une CSS & # 8216; intelligence & # 8217; ce qui est une douleur aussi souvent que c'est une aubaine. La marge de & Lt; p & Gt; s'effondre vers l'extérieur pour devenir une marge supérieure sur le bloc en ligne; cela se comporte alors comme une marge sur un & # 8216; inline & # 8217; élément serait, poussant l'alignement vertical de la ligne de texte.

Vous pouvez empêcher cela de se produire en supprimant les marges de & # 8216; p & # 8217; éléments et en utilisant padding à la place. Vous pouvez également placer un élément non vide sans marge supérieure en haut du bloc et un élément sans marge inférieure en bas.

  

Est-ce un bug de Firefox

Je pense que oui, selon les spécifications:

  

Les marges des éléments inline-block ne s'effondrent pas (même avec leurs enfants entrants).

bloc en ligne     Cette valeur force un élément à générer un conteneur de bloc de niveau en ligne. L'intérieur d'un bloc en ligne est formaté en tant que bloc et l'élément lui-même est formaté en tant que boîte atomique au niveau en ligne. modèle de rendu visuel

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top