web-dev-qa-db-fra.com

Pourquoi cet élément inline-block est-il poussé vers le bas?

Voici mon code et je veux comprendre que pourquoi #firstDiv est poussé vers le bas par tous les navigateurs. Je veux vraiment comprendre le fonctionnement interne du fait que c’est pourquoi il est poussé vers le bas plutôt que de le tirer vers le haut d’une manière ou d’une autre. (et je sais comment aligner leurs hauts :))

Et je sais que son débordement: caché qui le cause, mais pas sûr de savoir pourquoi il pousse cette div vers le bas.

body {
  width: 350px;
  margin: 0px auto;
}

#container {
  border: 15px solid orange;
}

#firstDiv {
  border: 10px solid brown;
  display: inline-block;
  width: 70px;
  overflow: hidden;
}

#secondDiv {
  border: 10px solid skyblue;
  float: left;
  width: 70px;
}

#thirdDiv {
  display: inline-block;
  border: 5px solid yellowgreen;
}
<div id="container">
  <div id="firstDiv">FIRST</div>
  <div id="secondDiv">SECOND</div>
  <div id="thirdDiv">THIRD
    <br>some more content<br> some more content
  </div>
</div>

http://jsfiddle.net/WGCyu/ .

overflowcss
232
Shawn Taylor

Fondamentalement, vous avez ajouté plus de fouillis dans votre code, ce qui crée plus de confusion. J'essaie tout d'abord de le supprimer, ce qui empêche de comprendre le véritable problème.

Tout d'abord, nous devons établir que quelle est la vraie question? C'est pourquoi l'élément "inline-block" est poussé vers le bas.

Maintenant, nous commençons à comprendre et à supprimer le fouillis en premier.

1 - Pourquoi ne pas donner la même largeur aux trois divs? Donnons-le.

2 - Un élément flottant a-t-il un lien quelconque avec un élément inline-block poussé vers le bas? Non, ça n'a rien à voir avec ça.

Donc, nous avons supprimé cette division . Et vous êtes témoin du même comportement d'élément inline-block poussé vers le bas.

Voici le tour de quelques littérature de saisir l’idée des boîtes de lignes et de la manière dont elles sont alignées dans la même ligne, surtout si vous lisez le dernier paragraphe avec soin, car c’est la réponse à votre question.

La ligne de base d'un "bloc en ligne" est la ligne de base de sa dernière zone de ligne dans le flux normal, sauf si elle n'a pas de zone de ligne en entrée ou si sa propriété "débordement" a une valeur calculée autre que "visible", auquel cas la ligne de base est le bord inférieur de la marge.

Si vous n'êtes pas sûr de base , voici une brève explication en termes simples.

Tous les caractères sauf "gjpqy" sont écrits sur la ligne de base. Vous pouvez penser à la ligne de base comme si vous tracez une simple ligne horizontale identique au soulignement situé juste en dessous de ces "caractères aléatoires". caractère (s) sur la même ligne, la partie inférieure de ces caractères tombe en dessous de la ligne.

Nous pouvons donc dire que tous les caractères sauf "gjpqy" sont écrits complètement au-dessus de la ligne de base, tandis qu'une partie de ces caractères est écrite au-dessous de la ligne de base.

3 - Pourquoi ne pas vérifier où se trouve la ligne de base de notre ligne? J'ai ajouté quelques caractères qui montrent la ligne de base de notre ligne.

4 - Pourquoi ne pas ajouter des caractères dans nos divs afin de trouver leurs lignes de base dans le div? Ici, quelques caractères ajoutés dans les div pour clarifier la ligne de base .

Maintenant que vous comprenez la référence, lisez la version simplifiée suivante sur la référence des blocs en ligne.

i) Si la propriété de débordement de inline-block en question est définie sur visible (ce qui est par défaut, il n'est donc pas nécessaire de définir si). Sa ligne de base serait alors la ligne de base du bloc conteneur de la ligne.

ii) Si la propriété de débordement du bloc inline en question est définie sur OTHER THAN visible. Ensuite, sa marge inférieure serait sur la ligne de base de la ligne de la boîte contenant.

  • Premier point en détail

Maintenant regardez à nouveau pour clarifier votre concept que ce qui se passe avec green div . S'il y a encore confusion, alors on ajoute ici plus de caractères proches de green div pour établir la ligne de base du bloc conteneur et la ligne de base de div verte est alignée.

Eh bien, je prétends maintenant qu'ils ont la même base? DROITE?

5 - Alors pourquoi ne pas les chevaucher et voir s'ils sont ajustés les uns sur les autres? Donc, j'apporte la troisième div-gauche: 35px; pour vérifier si elles ont la même base maintenant ?

Maintenant, nous avons notre premier point prouvé.

  • Deuxième point en détail

Eh bien, après l'explication du premier point, le deuxième point est facilement assimilable et vous voyez que la première div dont la propriété de dépassement de capacité est définie sur autre que visible (masqué) a sa marge inférieure sur la ligne de base de la ligne.

Maintenant, vous pouvez faire quelques expériences pour illustrer davantage.

  1. Set premier dépassement de div: visible (ou le supprimer complètement) .
  2. Set deuxième dépassement de div: autre que visible .
  3. Set les deux divs débordent: autre que visible .

Maintenant, ramenez votre image de fond et voyez si tout se passe bien pour vous.

  1. Apportez retournez votre div flotté (bien sûr il faut
    augmente une certaine largeur de corps) Vous voyez que cela n’a aucun effet.
  2. ramener les mêmes marges impaires .
  3. Définissez div vert dépassant: visible comme vous l'avez défini dans votre question (ce désalignement est dû à une augmentation de la largeur de la bordure de 1px à 5px, donc si ajustez le négatif à gauche vous verrez il n'y a pas de problème)
  4. Maintenant supprimez les caractères supplémentaires que j'ai ajoutés pour aider à la compréhension . (et bien sûr enlever le négatif à gauche)
  5. Enfin réduire la largeur du corps parce que nous n’avons plus besoin de plus large.

Et maintenant nous sommes revenus à l’origine.

J'espère avoir répondu à votre question.

347
Gary Lindahl

La valeur par défaut de vertical-align en CSS est baseline & cette règle est également applicable avec inline-block read this http://www.brunildo.org/test/inline-block .html

Écrivez vertical-align:top dans votre inline-block DIV.

Vérifiez ceci http://jsfiddle.net/WGCyu/1/

319
sandeep

Il suffit d'utiliser vertical-align:top;

démo

31
Elyor

Voir this exemple alternatif. La raison de ce comportement est décrite dans module CSS3: ligne: 3.2. Line Box wrapping [1] :

En général, le bord de début d'une zone de ligne touche le bord de départ du bloc qui le contient et le bord de fin touche le bord de fin du bloc qui le contient. Toutefois, des zones flottantes peuvent se situer entre le bloc conteneur Edge et la zone de ligne Edge. Ainsi, bien que les zones de ligne dans le même contexte de formatage en ligne aient généralement la même avance de progression en ligne (celle du bloc conteneur), elles peuvent varier si l'espace disponible de progression en ligne est réduit en raison des flottants [...]

Comme vous pouvez le constater, le troisième élément est poussé vers le bas, bien qu'il ne possède pas de propriété overflow. La raison doit être ailleurs. Le deuxième comportement que vous remarquez est décrit dans Spécifications des feuilles de style en cascade de niveau 2, révision 2.1 (CSS 2.1): 9.5 Floats [2] :

Puisqu'un flottant n'est pas dans le flux, les blocs non positionnés créés avant et après le flottant s'écoulent verticalement comme si le flottant n'existait pas. Toutefois, les zones de ligne actuelles et suivantes créées à côté du float sont raccourcies si nécessaire pour laisser de la place à la zone de marge du float.

Tous vos display:inline-block; divs utilisent un type spécial de baseline dans ce cas 10.8 Calculs de hauteur de ligne: les propriétés 'hauteur de ligne' et 'alignement vertical' (très fin) [3 ] :

La ligne de base d'un "bloc en ligne" est la ligne de base de sa dernière zone de ligne dans le flux normal, sauf si elle n'a pas de zone de ligne en entrée ou si sa propriété "débordement" a une valeur calculée autre que "visible", auquel cas la ligne de base est le bord inférieur de la marge.

Ainsi, lorsque vous utilisez des éléments flottants et des éléments inline-block, l'élément flottant est poussé sur le côté et le formatage en ligne est recalculé conformément à 1 . D'autre part, les éléments suivants sont raccourcis s'ils ne correspondent pas. Comme vous travaillez déjà avec un minimum d’espace, il n’ya pas d’autre moyen de modifier vos éléments, puis de les pousser 2 . Dans ce cas, l’élément le plus élevé définira la taille de votre div d’emballage, définissant ainsi la baseline , tandis que, d’autre part, la modification de position et de largeur indiquée dans 2 ne peut pas être appliqué à de tels éléments de hauteur maximale espacée minimale. Dans ce cas, il en résultera un comportement identique à celui de ma toute première démo.

Enfin, la raison pour laquelle votre overflow:hidden empêchera #firstDiv d’être poussée vers le bord inférieur de votre #container, bien que je n’aie trouvé aucune raison dans section 11 . Sans overflow:hidden, cela fonctionne comme excepté et défini par 2 et . démo

TL; DR: Regardez de très près les recommandations W3 et leurs implémentations dans le navigateur. À mon humble avis, les éléments flottants sont déterminés à afficher un comportement inattendu si vous ne connaissez pas tous les changements qu’ils apportent à vos éléments environnants. Voici un autre démo qui montre un problème commun avec les flottants.

8
Zeta

Au début, je commençais à répondre cette question , mais c'était bloqué comme dupe avant que je puisse terminer, alors je poste la réponse ici à la place.

Premièrement, nous devons comprendre ce que inline-block est.
Le définition dans MDN dit:

L'élément génère une zone d'élément de bloc qui sera traitée avec le contenu environnant comme s'il s'agissait d'une seule boîte en ligne (se comportant de la même manière qu'un élément remplacé)

Pour comprendre ce qui se passe ici, nous devons examiner vertical-align, et sa valeur par défaut baseline.

vertical position visualizations
Dans cette illustration, vous avez ce nuancier:
Blue: La ligne de base
Red: haut et bas de la hauteur de ligne
Vert: le haut et le bas de la zone de contenu en ligne.

Dans l'élément #left, vous avez du contenu textuel qui contrôle ce qu'est la ligne de base. Cela signifie que le texte à l'intérieur définit la ligne de base pour #left.
Dans la droite, il n'y a pas de contenu, le navigateur n'a donc d'autre choix que d'utiliser le bas de la boîte comme référence.

Voir cette visualisation où j'ai dessiné la ligne de base sur un exemple où le premier conteneur en ligne contient du texte et le suivant est vide:

Baseline drawn

Si vous alignez spécifiquement un élément en haut, vous dites vraiment que vous alignez le haut de cet élément sur le haut de la zone de ligne.

Cela pourrait être plus facile à comprendre par un exemple.

div {
    display: inline-block;
    width: 100px;
    height: 150px;
    background: gray;
    vertical-align: baseline;
}
div#middle {
    vertical-align: top;
    height: 50px
}
   
div#right {
    font-size: 30px;
    height: 100px
}
<div id="left">
  <span>groovy</span>
</div>
<div id="middle">groovy</div>

<div id="right">groovy</div>

Le résultat est le suivant - et j’ai ajouté la ligne de base bleue et la zone de ligne rouge: Explained vertical-align
Ce qui se passe ici, c’est que la hauteur de la zone de ligne dépend de la manière dont le contenu de la ligne est structuré. Cela signifie que pour calculer l'alignement supérieur, les alignements de la ligne de base doivent d'abord être calculés. L'élément #middle a vertical-align:top, il n'est donc pas utilisé pour le positionnement de la ligne de base. mais les #left et #right sont positionnés verticalement de manière à ce que leurs lignes de base soient alignées. Lorsque cela est fait, la hauteur de la boîte de ligne a augmenté, car l'élément #right a été légèrement relevé en raison de la taille plus grande de la police. Ensuite, la position supérieure de l'élément #middle peut être calculée, en haut de la ligne.

4
awe

le problème vient du fait que vous avez appliqué float: left on the second div. ce qui fait que la deuxième div vient à gauche et votre première div tombe et vient après votre deuxième div. Si vous appliquez float: à gauche sur la première div également, votre problème aura disparu.

overflow: hidden ne pose aucun problème à votre mise en page, overflow: hidden n'affecte que les éléments internes d'un div, il n'a rien à voir avec les autres éléments extérieurs.

1
Pal Singh

Essayez de créer toutes les propriétés CSS de tous les éléments.

J'ai eu un problème similaire et en corrigeant cela, j'ai identifié que je déposais un élément avec la propriété Font dans Div Element.

Après avoir abandonné cet élément avec la propriété Font, l'alignement de tous les DIV a été perturbé. Pour résoudre ce problème, je règle la propriété Font sur tous les éléments DIV de la même manière que l'élément qui y est déposé.

Dans l'exemple suivant, l'élément Dropped de la classe ".dldCuboidButton" défini avec font-size: 30 px.

J'ai donc ajouté la même propriété aux classes restantes, à savoir .cuboidRecycle, .liCollect, .dldCollect, utilisées par les éléments DIV. De cette façon, tous les éléments DIV suivent les mêmes mesures avant et après y avoir déposé l’élément.

.cuboidRecycle {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.liCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}

.dldCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#009933;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.dldCuboidButton {
    background-color:  #7c6436;
    color: white; /* White text */
    font-size: 30px; /* Set a font-size */
    border-radius: 8px;
    margin-top: 1px;
  }

Voici l'exemple de HTML créé dynamiquement à l'aide de CSS ci-dessus.

$("div#tabs").append(
  "<div id='" + newTabId + "'>#" + uniqueId + 
  "<input type=hidden id=hdn_tmsource_" + uniqueId + "  value='" + divTmpfest + "'>" + 
  "<input type=hidden id=leCuboidInfo_" + uniqueId + " value=''>" + 
  "<div id='" + divRecycleCuboid + "' class=cuboidRecycle ondrop='removeDraggedCuboids(event, ui)'  ondragover='allowDrop(event)'><font size='1' color='red'> Trash bin </font></div>" +
  "<div id='" + divDropLeCuboid  + "' class=liCollect ondrop='dropForLinkExport(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Manifest Cuboid here</font></div>" +
  "<div id='" + divDropDwldCuboid  + "' class=dldCollect ondrop='dropForTMEntry(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Cuboids here..</font></div>" +
  "</div>" 
);
0
Rahul Varadkar

Essayez d’ajouter padding:0; au corps et d’enlever la marge de vos divs.

Ajoutez background-color:*any couleur en dehors de l'arrière-plan * pour vérifier la différence.

0
LOLZ