Pourquoi cet élément de bloc en ligne est-il poussé vers le bas?

Question

Voici mon code et je veux comprendre que pourquoi #firstDiv est poussé vers le bas par tous les navigateurs. J'ai vraiment envie de comprendre le fonctionnement interne du fait que pourquoi son être poussé vers le bas plutôt que de tirer vers le haut, d'une façon ou d'une autre. (et je sais comment aligner leurs tops :))

Et je sais que son overflow:hidden qui en est la cause, mais pas sûr que pourquoi ses poussant div à la baisse.

<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>

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;    
}

http://jsfiddle.net/WGCyu/.

Answer 1

Fondamentalement, vous avez ajouté plus de désordre dans votre code, ce qui crée plus de confusion j'ai tout d'abord essayer de supprimer l'encombrement qui entrave la compréhension de la véritable question.

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

Maintenant nous commençons à le comprendre et enlever le désordre de la première.

1 - Pourquoi ne pas donner à tous les trois divs même la largeur de la bordure? Nous allons lui donner.

2 - Ne flottante élément a aucun lien avec inline-block élément étant poussé vers le bas? Non, il n'a rien à faire avec elle.

Alors, nous avons enlevé le div au total. Et vous assistons même le comportement de inline-block élément étant poussé vers le bas.

Ici vient le tour de certains de la littérature de saisir l'idée de la ligne de boîtes et comment ils sont doublés dans la même ligne esp lire le dernier paragraphe avec soin, car c'est là que réside la réponse à votre question.

La base d'un 'inline-block' est la ligne de base de la dernière ligne de la boîte dans le flux normal, sauf qu'il a pas de flow line boîtes ou si son "dépassement" la propriété a une valeur calculée d'autres que d'être "visible", et dans ce cas, la référence est la marge du bas bord.

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

Tous les caractères à l'exception de "gjpqy" sont écrites sur la ligne de base que vous pouvez penser de base que si vous dessinez une simple ligne horizontale de même que le soulignement juste en dessous de ces "caractères aléatoires", puis ce sera le départ, mais maintenant, si vous écrivez un de " gjpqy caractère(s) sur la même ligne puis la partie inférieure de ces personnages tombent au-dessous de la ligne.

Donc, nous pouvons dire que tous les caractères à l'exception de "gjpqy' sont écrits entièrement au-dessus de la ligne de base alors qu'une partie de ces caractères sont écrits au-dessous de la ligne de base.

3 - Pourquoi ne pas vérifier où est la base de notre ligne? J'ai ajouté quelques personnages qui montrent la ligne de base de notre ligne.

4 - Pourquoi ne pas ajouter des caractères dans notre divs trop à trouver leurs lignes de base dans les div? Ici, certains caractères ajoutés dans les divs pour clarifier la ligne de base.

Maintenant, quand vous comprenez au sujet de base, lire la suite de la version simplifiée sur base de inline-block.

i) Si inline-block en question a son débordement de la propriété a la valeur visible (qui est par défaut donc pas besoin de le définir). Ensuite, son niveau de référence serait la ligne de base du bloc contenant de la ligne.

ii) Si inline-block en question a son débordement de jeu de propriétés AUTRES QUE visible. Alors sa marge inférieure serait sur le point de référence de la ligne de la boîte contenant.

• Premier point dans le détail

Maintenant, regardez ce nouveau afin de clarifier votre concept que ce qui se passe avec le vert de la div. Si encore toute confusion ici est ajouté plus de caractères à proximité de green div pour établir la ligne de base du bloc contenant et vert div de base est alignée.

Eh bien, je suis maintenant en affirmant qu'ils ont la même base? DROIT?

5 - Alors pourquoi ne pas se chevauchent et voir s'ils sont aptes droit l'un sur l'autre? Donc, je vous apporte troisième div -left: 35px; pour vérifier si ils ont la même base maintenant?

Maintenant, nous avons eu notre premier point prouvé.

• Deuxième point dans le détail

Eh bien, après explication du premier point deuxième point est facile à digérer et vous voyez que le premier div qui a pour propriété de dépassement différent de visible (caché) a sa marge inférieure sur la ligne de base de la ligne.

Maintenant, vous pouvez faire quelques expériences afin de mieux l'illustrer.

1. Définissez d'abord div en overflow:visible (ou l'enlever complètement).
2. Set deuxième div en overflow: autres que visible.
3. Ensemble les deux divs overflow: autres que visible.

Maintenant, ramenez votre désordre et de voir si tout est à la recherche d'amende.

1. Apportez le dos de votre div flottant (bien sûr, il est nécessaire de
   augmenter la largeur de corps) Vous voyez, il n'a pas d'effet.
2. Ramener même bizarre marges.
3. Ensemble vert div en overflow: visible que vous définissez dans votre question (que l'incohérence est due à l'augmentation de la largeur de la bordure de 1px de 5px afin de s' ajuster négatif à gauche vous verrez il n'y a pas de problème)
4. Maintenant supprimer d'autres personnages que j'ai ajouté à de l'aide dans la compréhension. (et bien sûr supprimer négatif à gauche)
5. Enfin de réduire la largeur du corps , car nous n'avons plus besoin le plus large.

Et maintenant nous sommes de retour là où nous avons commencé à partir.

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

Answer 2

La valeur par défaut en CSS est et cette règle est également applicable à `` lire ce http://www.brunildo.org/test/inline-block.html

Écrire dans votre DIV.

Vérifier cette http://jsfiddle.net/WGCyu/1/

Answer 3

La vue de ce autre exemple. La raison de ce comportement est décrit dans le module CSS3: de ligne: 3.2. Zone de ligne d'emballage [1]:

En général, le bord de début d'une zone de ligne de touche le bord de début de son bloc contenant et le bord de la fin touche le bord de la fin de son bloc contenant. Cependant, boîtes flottantes peuvent venir entre le bloc contenant le bord et la zone de ligne de bord. Ainsi, bien que la ligne de cases dans le même formatage en ligne contexte ont généralement les mêmes inline progression de l'avance (que du bloc contenant), ils peuvent varier si disponible inline-la progression de l'espace est réduit en raison de flotteurs[...]

Comme vous pouvez le voir, le troisième élément est poussé vers le bas, bien qu'il ne dispose pas d'un overflow de la propriété. La raison doit être quelque part d'autre à trouver. Le second comportement est décrit dans les Feuilles de Style en Cascade Niveau 2 Révision 1 (CSS 2.1) Spécifications: 9.5 Flotteurs [2]:

Depuis un flotteur n'est pas dans le flux, les non-bloc placé des boîtes créé avant et après le flotteur de la boîte de flux verticalement, comme si le flotteur n'existe pas. Cependant, le cours et le suivant de la ligne de boîtes créé à côté du flotteur sont raccourcie à la longueur nécessaire pour faire de la place pour la zone marge du flotteur.

Tous vos display:inline-block; divs sont à l'aide d'un type spécial d' baseline dans ce cas 10.8 hauteur de la Ligne des calculs: 'line-height' et 'vertical-align' propriétés (très fin) [3]:

La base d'un 'inline-block' est la ligne de base de la dernière ligne de la boîte dans le flux normal, sauf qu'il a pas de flow line boîtes ou si son "dépassement" la propriété a une valeur calculée d'autres que d'être "visible", et dans ce cas, la référence est la marge du bas bord.

Ainsi, lorsque vous êtes en utilisant des éléments flottants et inline-block - éléments, l'élément flottant sera poussé sur le côté et le formatage en ligne sera recalculé en fonction 1. Sur l'autre main, la prochaine éléments sont raccourcies si elles ne conviennent pas. Puisque vous travaillez déjà avec un minimum d'espace, il n'y a pas d'autre façon de modifier vos éléments puis de les pousser à 2. Dans ce cas, la plus haute de l'élément permet de définir la taille de votre emballage div, définissant ainsi l' baseline 3, tandis que, d'autre part, la modification de la position et de la largeur indiquée dans les 2 ne peuvent pas être appliquées à de tels minimale espacés au maximum de la hauteur des éléments. Dans ce cas, un comportement que dans ma toute première démo du résultat.

Enfin, la raison de votre overflow:hidden empêchera #firstDiv à être poussé vers le bas de votre #container, bien que je ne pouvais pas trouver une raison dans la section 11. Sans overflow:hidden il fonctionne correctement et définie par 2 et 3. Démo

TL;DR: Avoir un regard très attentif sur le W3 recommandations et la mise en œuvre dans le navigateur. À mon humble avis, les éléments flottants sont décidés à montrer un comportement inattendu si vous ne connaissez pas tous les changements qu'ils font de vos éléments environnants. Voici une autre démonstration qui montre un problème commun avec des flotteurs.

Answer 4

le problème est parce que vous avez appliqué float : left sur le deuxième div. qui en fait le deuxième div à venir sur le côté gauche et votre premier div descend et vient après votre deuxième div. Si vous appliquez float : left sur le premier div aussi, votre problème aura disparu.

débordement : caché est ne cause aucun problème à votre disposition, déborder : caché d’éléments affecte seulement internes d’un div, cela n’a rien à voir avec les autres éléments qui n’entrent pas.