it-swarm.com.de

Warum wird dieses Inline-Block-Element nach unten gedrückt?

Das Folgende ist mein Code und ich möchte verstehen, dass warum #firstDiv von allen Browsern nach unten gedrückt wird. Ich möchte wirklich das Innenleben der Tatsache verstehen , warum es nach unten gedrückt wird, anstatt es auf die eine oder andere Weise nach oben zu ziehen. (und ich kann ihre Spitzen ausrichten :))

Und ich weiß, dass es überläuft: versteckt, was es verursacht, aber nicht sicher, warum es dieses Div nach unten drückt.

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

232
Shawn Taylor

Grundsätzlich haben Sie Ihrem Code mehr Unordnung hinzugefügt, was mehr Verwirrung stiftet. Deshalb versuche ich zunächst, Unordnung zu beseitigen, die das Verständnis des eigentlichen Problems erschwert.

Zunächst müssen wir feststellen, was die eigentliche Frage ist. Deshalb "inline-block "Element wird nach unten gedrückt.

Jetzt beginnen wir es zu verstehen und beseitigen zuerst die Unordnung.

1 - Warum nicht alle drei Divs die gleiche Randbreite haben? Lass es uns geben.

2 - Hat das Floating-Element irgendeine Verbindung zum Inline-Block-Element, das nach unten gedrückt wird? Nein, es hat nichts damit zu tun.

Also, wir haben dieses div ganz entfernt . Und Sie beobachten dasselbe Verhalten, wenn Inline-Block-Elemente nach unten gedrückt werden.

Hier kommt die Umdrehung von einigem Literatur , um die Idee von Linienkästen und wie sie in der gleichen Linie gezeichnet werden zu erfassen, besonders den letzten Absatz sorgfältig lesen, weil dort die Antwort Ihrer Frage liegt.

Die Grundlinie eines 'Inline-Blocks' ist die Grundlinie seines letzten Zeilenrahmens im normalen Fluss, es sei denn, er hat entweder keine Zeilenrahmen im Fluss oder seine Eigenschaft 'overflow' hat einen anderen berechneten Wert als 'visible' in In diesem Fall ist die Grundlinie der untere Randrand.

Wenn Sie sich bei Grundlinie nicht sicher sind, finden Sie hier eine kurze Erklärung in einfachen Worten.

Alle Zeichen mit Ausnahme von "gjpqy" werden auf der Grundlinie geschrieben. Sie können sich die Grundlinie so vorstellen, als ob Sie eine einfache horizontale Linie zeichnen, die der Unterstreichung direkt unter diesen "zufälligen Zeichen" entspricht. Wenn Sie jedoch eines von "gjpqy" schreiben, ist dies die Grundlinie. Zeichen in derselben Zeile, dann würde der untere Teil dieser Zeichen unter die Zeile fallen.

Wir können also sagen, dass alle Zeichen mit Ausnahme von 'gjpqy' vollständig über der Grundlinie geschrieben sind, während ein Teil dieser Zeichen unter der Grundlinie geschrieben ist.

3 - Warum nicht überprüfen, wo die Grundlinie unserer Linie ist? Ich habe wenige Zeichen, die die Grundlinie zeigen unserer Zeile hinzugefügt.

4 - Warum nicht auch einige Zeichen in unseren Divs hinzufügen, um ihre Grundlinien in den Divs zu finden? Hier einige Zeichen in Divs hinzugefügt, um die Grundlinie zu verdeutlichen .

Wenn Sie sich jetzt mit Baseline auskennen, lesen Sie die folgende vereinfachte Version über Baseline von Inline-Blöcken.

i) Wenn die Überlaufeigenschaft des fraglichen Inline-Blocks auf sichtbar gesetzt ist (dies ist standardmäßig so, dass keine Einstellung erforderlich ist). Dann wäre seine Grundlinie die Grundlinie des enthaltenden Blocks der Linie.

ii) Wenn die Überlaufeigenschaft des fraglichen Inline-Blocks auf OTHER THAN visible gesetzt ist. Dann würde sein unterer Rand auf der Grundlinie der Zeile des enthaltenden Kastens sein.

  • Erster Punkt im Detail

Nun sieh dir das noch einmal an, um dein Konzept zu verdeutlichen, was mit green div passiert . Wenn noch Verwirrung herrscht, wird hier werden weitere Zeichen in der Nähe des grünen Bereichs hinzugefügt, um die Grundlinie des enthaltenen Blocks zu bestimmen und der grüne Bereich wird ausgerichtet.

Nun, ich behaupte jetzt, dass sie die gleiche Grundlinie haben? RICHTIG?

5 - Warum überlappen Sie sie dann nicht und prüfen, ob sie richtig aufeinander passen? Also, ich bringe dritten Div-Links: 35px; m zu überprüfen, ob sie jetzt die gleiche Grundlinie haben ?

Jetzt haben wir unseren ersten Punkt bewiesen.

  • Zweiter Punkt im Detail

Nun, nachdem der erste Punkt erklärt wurde, ist der zweite Punkt leicht verdaulich und Sie sehen, dass der untere Rand des ersten Divs, dessen Überlaufeigenschaft nicht sichtbar (versteckt) ist, auf der Grundlinie der Linie liegt.

Nun können Sie einige Experimente durchführen, um dies weiter zu veranschaulichen.

  1. Setze first div overflow: visible (oder entferne es insgesamt) .
  2. Setze zweiter Div Überlauf: nicht sichtbar .
  3. Setze beide Divs überlaufen: nicht sichtbar .

Bringen Sie jetzt Ihre Unordnung zurück und sehen Sie, ob alles zu gut für Sie aussieht.

  1. Bringen Sie zurück zu Ihrem Floated Div (natürlich muss es sein)
    Körperbreite erhöhen) Sie sehen, es hat keine Wirkung.
  2. Bringen Sie die gleichen ungeraden Ränder zurück .
  3. Setze grünes Div zum Überlaufen: sichtbar, wie du in deiner Frage eingestellt hast (diese Fehlausrichtung ist auf die Vergrößerung der Randbreite von 1px auf 5px zurückzuführen. Also, wenn negatives Links anpassen wirst du sehen es gibt kein Problem)
  4. Nun entferne zusätzliche Zeichen, die ich zum besseren Verständnis hinzugefügt habe . (und natürlich negatives links entfernen)
  5. Zum Schluss Körperbreite reduzieren weil wir keine breitere mehr brauchen.

Und jetzt sind wir wieder da, wo wir angefangen haben.

Hoffentlich habe ich deine Frage beantwortet.

347
Gary Lindahl

Der Standardwert für vertical-align in CSS ist baseline & diese Regel gilt auch mit inline-block lies das http://www.brunildo.org/test/inline-block.html

Schreiben vertical-align:top in deinem inline-block DIV.

Überprüfen Sie dies http://jsfiddle.net/WGCyu/1/

319
sandeep

Benutz einfach vertical-align:top;

Demo

31
Elyor

Sehen Sie sich dieses alternative Beispiel an. Der Grund für ein solches Verhalten ist in CSS3-Modul: Zeile: 3.2 beschrieben. Zeilenumbruch [1] :

Im Allgemeinen berührt die Startkante eines Linienrahmens die Startkante des umgebenden Blocks und die Endkante die Endkante des umgebenden Blocks. Floating-Boxen können jedoch zwischen der Kante des enthaltenden Blocks und der Kante der Line-Box liegen. Obwohl Zeilenfelder im selben Inline-Formatierungskontext im Allgemeinen den gleichen Inline-Fortschritt aufweisen (den des enthaltenen Blocks), können sie variieren, wenn der verfügbare Inline-Fortschritt-Raum aufgrund von Floats reduziert wird.

Wie Sie sehen, wird das dritte Element nach unten verschoben, obwohl es keine overflow -Eigenschaft besitzt. Der Grund muss woanders zu finden sein. Das zweite Verhalten, das Sie bemerken, wird in Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) beschrieben. Spezifikation: 9.5 Floats [2] :

Da sich ein Float nicht im Flow befindet, fließen nicht positionierte Blockboxen, die vor und nach dem Float-Box erstellt wurden, vertikal, als ob der Float nicht vorhanden wäre. Die aktuellen und nachfolgenden Zeilenfelder, die neben dem Float erstellt werden, werden jedoch nach Bedarf gekürzt, um Platz für das Randfeld des Floats zu schaffen.

All dein display:inline-block; divs verwenden in diesem Fall eine spezielle Art von baseline :

Die Grundlinie eines 'Inline-Blocks' ist die Grundlinie seines letzten Zeilenrahmens im normalen Fluss, es sei denn, er hat entweder keine Zeilenrahmen im Fluss oder seine Eigenschaft 'overflow' hat einen anderen berechneten Wert als 'visible' in In diesem Fall ist die Grundlinie der untere Randrand.

Also, wenn Sie schwebende Elemente verwenden und inline-block Elemente, das Floating Element wird zur Seite geschoben und die Inline-Formatierung wird nach 1 neu berechnet. Andererseits werden die nächsten Elemente gekürzt, wenn sie nicht passen. Da Sie bereits mit einem Minimum an Speicherplatz arbeiten, gibt es keine andere Möglichkeit, Ihre Elemente zu ändern, als sie zu verschieben 2 . In diesem Fall definiert das höchste Element die Größe Ihres Wrapping-Divs, wodurch das baseline3 definiert wird, während andererseits die Änderung von Position und Breite angegeben in 2 kann nicht auf solche Elemente mit minimalem Abstand und maximaler Höhe angewendet werden. In diesem Fall ergibt sich ein Verhalten wie in meiner allerersten Demo.

Schließlich ist der Grund, warum Ihr overflow:hidden verhindert #firstDiv, um an den unteren Rand Ihres #container, obwohl ich in Abschnitt 11 keinen Grund gefunden habe. Ohne overflow:hidden Es funktioniert wie durch 2 und 3 definiert. Demo

TL; DR: Schauen Sie sich die W3-Empfehlungen und die Implementierungen im Browser genau an. Meiner bescheidenen Meinung nach zeigen schwebende Elemente ein unerwartetes Verhalten, wenn Sie nicht alle Änderungen kennen, die sie an Ihren umgebenden Elementen vornehmen. Hier ist eine weitere Demo , die ein häufiges Problem mit Floats zeigt.

8
Zeta

Ich habe ursprünglich mit der Beantwortung von diese Frage begonnen, sie wurde jedoch als Dupe gesperrt, bevor ich fertig werden konnte. Deshalb poste ich die Antwort hier.

Zuerst müssen wir verstehen, was inline-block ist.
Die Definition in MDN sagt:

Das Element generiert eine Blockelementbox, die mit dem umgebenden Inhalt wie eine einzelne Inline-Box durchströmt wird (ähnlich wie bei einem ersetzten Element).

Um zu verstehen, was hier vor sich geht, müssen wir uns vertical-align und sein Standardwert baseline.

vertical position visualizations
In dieser Abbildung haben Sie diese Farbkarte:
Blau: Die Grundlinie
Rot: Die Ober- und Unterseite der Zeilenhöhe
Grün: Oben und unten im Inline-Inhaltsfeld.

Im Element #left haben Sie Textinhalte, die die Grundlinie steuern. Dies bedeutet, dass der Text darin die Grundlinie für #left definiert.
In #right ist kein Inhalt vorhanden, sodass der Browser keine andere Option hat, als den unteren Rand der Box als Grundlinie zu verwenden.

In dieser Visualisierung habe ich die Grundlinie für ein Beispiel gezeichnet, in dem der erste Inline-Container Text enthält und der nächste leer ist:

Baseline drawn

Wenn Sie ein Element speziell nach oben ausrichten, sagen Sie wirklich, dass Sie den oberen Rand dieses Elements am oberen Rand des Linienrahmens ausrichten.

Dies könnte anhand eines Beispiels verständlicher sein.

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>

Das Ergebnis ist dieses - und ich fügte die blaue Grundlinie und das rote Linienfeld hinzu: Explained vertical-align
Was hier passiert, ist, dass die Höhe des Zeilenrahmens davon abhängt, wie der Inhalt der gesamten Zeile angeordnet ist. Dies bedeutet, dass zur Berechnung der oberen Ausrichtung zuerst die Grundlinienausrichtungen berechnet werden müssen. Das #middle Element hat vertical-align:top, wird also nicht für die Grundlinienpositionierung verwendet. aber die #left und #right sind vertikal positioniert, sodass ihre Basislinien ausgerichtet sind. Wenn dies erledigt ist, hat sich die Höhe des Linienrahmens erhöht, weil das #right -Element wurde aufgrund der größeren Schriftgröße etwas nach oben verschoben. Dann ist die oberste Position für die #middle -Element kann berechnet werden und befindet sich am oberen Rand des Zeilenrahmens.

4
awe

das problem ist, weil du float angewendet hast: links auf der zweiten div. Dadurch kommt die zweite Division auf die linke Seite und die erste fällt ab und folgt der zweiten Division. Wenn Sie float: left auch auf der ersten Div anwenden, wird Ihr Problem verschwunden sein.

überlauf: Versteckt verursacht kein Problem für Ihr Layout. Überlauf: Versteckt betrifft nur innere Elemente eines Div. Es hat nichts mit anderen Elementen zu tun, die sich außerhalb des Div befinden.

1
Pal Singh

Versuchen Sie, alle CSS-Eigenschaften aller Elemente gleich zu machen.

Ich hatte ein ähnliches Problem und stellte fest, dass ich beim Beheben dieses Problems ein Element mit der Eigenschaft Font in Div Element löschte.

Nachdem das Element mit der Font-Eigenschaft gelöscht wurde, wurde die Ausrichtung aller DIV gestört. Um dies zu beheben, setze ich die Font-Eigenschaft auf alle DIV-Elemente, die mit dem Element identisch sind, das darin abgelegt wird.

Im folgenden Beispiel wird das Drop-Element der Klasse ".dldCuboidButton" mit der Schriftgröße 30 px definiert.

Daher habe ich den verbleibenden Klassen, d. H.. CuboidRecycle, .liCollect und .dldCollect, die von DIV-Elementen verwendet werden, dieselbe Eigenschaft hinzugefügt. Auf diese Weise folgen alle DIV-Elemente vor und nach dem Ablegen des Elements denselben Messungen.

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

Hier ist das Beispiel für HTML, das mithilfe des obigen CSS dynamisch erstellt wurde.

$("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

Versuchen Sie, padding:0; an den Körper und entfernen Sie den Rand Ihrer divs.

Hinzufügen background-color:*any Farbe neben dem Hintergrund *, um den Unterschied zu überprüfen.

0
LOLZ