Grundsätzlich haben Sie Ihrem Code mehr Unordnung hinzugefügt, was zu mehr Verwirrung führt. Daher versuche ich zunächst, Unordnung zu beseitigen, die das Verständnis des eigentlichen Problems behindert.
Zunächst müssen wir feststellen, was die eigentliche Frage ist.
Deshalb wird das inline-block
Element " " nach unten gedrückt.
Jetzt beginnen wir es zu verstehen und beseitigen zuerst die Unordnung.
1 -
Warum nicht allen drei Divs die gleiche Randbreite geben?
Lass es uns geben.
2 - Hat das Floating-Element eine Verbindung zum Inline-Block-Element, das nach unten gedrückt wird? Nein, das hat nichts damit zu tun.
Also haben wir dieses Div komplett entfernt . Und Sie erleben dasselbe Verhalten, wenn das Inline-Block-Element nach unten gedrückt wird.
Hier ist die Literatur an der Reihe , die Idee von Zeilenumbrüchen zu verstehen und wie sie in derselben Zeile angeordnet sind. Lesen Sie den letzten Absatz sorgfältig durch, da dort die Antwort auf Ihre Frage liegt.
Die Basislinie eines 'Inline-Blocks' ist die Basislinie seines letzten Zeilenfelds im normalen Fluss, es sei denn, es hat entweder keine In-Flow-Zeilenfelder oder seine 'Überlauf'-Eigenschaft hat einen anderen berechneten Wert als' sichtbar 'in In diesem Fall ist die Grundlinie die untere Randkante.
Wenn Sie sich über die Grundlinie nicht sicher sind, finden Sie hier eine kurze Erklärung in einfachen Worten.
Alle Zeichen außer 'gjpqy' werden auf die 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. Dann ist dies die Grundlinie, aber wenn Sie jetzt eines von 'gjpqy' schreiben. Zeichen in derselben Zeile, dann würde der untere Teil dieser Zeichen unter die Zeile fallen.
Wir können also sagen, dass alle Zeichen außer '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 sich die Basislinie unserer Linie befindet? Ich habe einige Zeichen hinzugefügt , die die Grundlinie unserer Linie zeigen.
4 - Warum nicht auch einige Zeichen in unsere Divs einfügen, um ihre Basislinien im Div zu finden? Hier werden einige Zeichen in divs hinzugefügt, um die Grundlinie zu verdeutlichen .
Wenn Sie sich mit der Grundlinie vertraut gemacht haben, lesen Sie die folgende vereinfachte Version über die Grundlinie von Inline-Blöcken.
i) Wenn für den fraglichen Inline-Block die Überlaufeigenschaft auf sichtbar gesetzt ist (dies ist standardmäßig so, dass keine Einstellung erforderlich ist). Dann wäre seine Grundlinie die Grundlinie des enthaltenden Linienblocks.
ii) Wenn für den fraglichen Inline-Block die Überlaufeigenschaft auf ANDERE ALS sichtbar gesetzt ist. Dann würde sich sein unterer Rand auf der Grundlinie der Zeile des enthaltenen Kastens befinden.
Schauen Sie sich das jetzt noch einmal an, um Ihr Konzept zu verdeutlichen, was mit green div passiert . Wenn noch Verwirrung herrscht, werden hier weitere Zeichen in der Nähe von grünem Div hinzugefügt, um die Grundlinie des enthaltenen Blocks festzulegen, und die grüne Grundlinie wird ausgerichtet.
Nun, ich behaupte jetzt, dass sie die gleiche Grundlinie haben? RICHTIG?
5 - Warum überlappen Sie sie dann nicht und prüfen Sie, ob sie richtig zueinander passen? Also bringe ich den dritten Teil links: 35px; um zu überprüfen, ob sie jetzt die gleiche Grundlinie haben ?
Jetzt haben wir unseren ersten Punkt bewiesen.
Nun, nach der Erklärung des ersten Punktes ist der zweite Punkt leicht verdaulich und Sie sehen, dass der untere Rand des ersten Divs, dessen Überlaufeigenschaft auf nicht sichtbar (versteckt) eingestellt ist, auf der Basislinie der Linie liegt.
Jetzt können Sie einige Experimente durchführen, um dies weiter zu veranschaulichen.
- Stellen Sie den ersten Div-Überlauf ein: sichtbar (oder entfernen Sie ihn ganz) .
- Stellen Sie den zweiten Div-Überlauf ein: nicht sichtbar .
- Stellen Sie beide divs Überlauf: andere als sichtbar .
Bringen Sie jetzt Ihre Unordnung zurück und sehen Sie, ob alles für Sie in Ordnung ist.
- Bringen Sie Ihr schwebendes Div zurück (natürlich muss
die Körperbreite vergrößert werden). Sie sehen, dass es keine Wirkung hat.
- Bringen Sie die gleichen ungeraden Ränder zurück .
- Setzen Sie grünes Div auf Überlauf: sichtbar, wie Sie es in Ihrer Frage festgelegt haben (diese Fehlausrichtung ist auf die Vergrößerung der Rahmenbreite von 1 Pixel auf 5 Pixel zurückzuführen. Wenn Sie also das negative Links links anpassen, sehen Sie, dass es kein Problem gibt).
- Nun zusätzliche Zeichen entferne ich zu Hilfe hinzugefügt zu verstehen . (und natürlich das negative linke entfernen)
- Reduzieren Sie schließlich die Körperbreite, da wir keine breitere mehr benötigen.
Und jetzt sind wir wieder da, wo wir angefangen haben.
Hoffentlich habe ich deine Frage beantwortet.
Der Standardwert für
vertical-align
in CSS istbaseline
& diese Regel gilt auch für dasinline-block
Lesen dieser http://www.brunildo.org/test/inline-block.htmlSchreiben Sie
vertical-align:top
in Ihreinline-block
DIV.Überprüfen Sie dies http://jsfiddle.net/WGCyu/1/
quelle
display:inline-block
kombiniert mit beschreibtfloat:left/right
.vertical-align
Eigenschaft ändern , keine der in der akzeptierte Antwort gilt.Benutz einfach
vertical-align:top;
Demo
quelle
Sehen Sie sich dieses alternative Beispiel an. Der Grund für ein solches Verhalten ist im CSS3-Modul beschrieben: Zeile: 3.2. Zeilenumbruch [1] :
Wie Sie sehen können, wird das dritte Element nach unten gedrückt, obwohl es keine
overflow
Eigenschaft hat. 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] :Alle Ihre
display:inline-block;
Divs verwendenbaseline
in diesem Fall eine spezielle Art von 10.8 Berechnungen der Linienhöhe: die Eigenschaften 'Linienhöhe' und 'Vertikalausrichtung' (ganz am Ende) [3] :Wenn Sie also schwebende Elemente und
inline-block
Elemente verwenden, wird das schwebende Element zur Seite geschoben und die Inline-Formatierung wird gemäß 1 neu berechnet . Andererseits werden die nächsten Elemente gekürzt, wenn sie nicht passen. Da Sie bereits mit einem minimalen 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 Umhüllungsdivs und damit diebaseline
3 , während die in 2 angegebene Änderung von Position und Breite nicht auf solche Elemente mit minimalem Abstand und maximaler Höhe angewendet werden kann. In diesem Fall ergibt sich ein Verhalten wie in meiner allerersten Demo.Schließlich der Grund, warum Ihr
overflow:hidden
Wille verhindert#firstDiv
, an den unteren Rand Ihres Willens geschoben zu werden#container
, obwohl ich in Abschnitt 11 keinen Grund finden konnte . Ohneoverflow:hidden
funktioniert es wie ausgenommen und definiert durch 2 und 3 . DemoTL; DR: Sehen Sie sich die W3-Empfehlungen und die Implementierungen im Browser genau an. Meiner bescheidenen Meinung nach zeigen schwebende Elemente 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.
quelle
Ich habe ursprünglich damit begonnen, diese Frage zu beantworten , aber sie wurde als Betrug gesperrt, bevor ich fertig werden konnte. Deshalb poste ich die Antwort stattdessen hier.
Zuerst müssen wir verstehen, was
inline-block
ist.Die Definition in MDN lautet:
Um zu verstehen, was hier vor sich geht, müssen wir uns
vertical-align
den Standardwert ansehenbaseline
.In dieser Abbildung haben Sie diese Farbkarte:
Blau: Die Grundlinie
Rot: Die Ober- und Unterseite der Zeilenhöhe
Grün: Die Ober- und Unterseite des Inline-Inhaltsfelds.
Im Element #left haben Sie Textinhalte, die die Basislinie steuern. Dies bedeutet, dass der darin enthaltene Text die Grundlinie für #left definiert.
In #right gibt es keinen Inhalt, daher hat der Browser keine andere Option, als das Feld unten als Basis zu verwenden.
Sehen Sie sich diese Visualisierung an, in der ich die Grundlinie in einem Beispiel gezeichnet habe, in dem der erste Inline-Container Text enthält und der nächste leer ist:
Wenn Sie ein Element speziell nach oben ausrichten, sagen Sie wirklich, dass Sie die Oberseite dieses Elements nach oben im Linienfeld ausrichten.
Dies könnte anhand eines Beispiels leichter zu verstehen sein.
Das Ergebnis ist folgendes - und ich habe die blaue Grundlinie und das rote Linienfeld hinzugefügt: Was hier passiert, ist, dass die Höhe des Linienfelds davon abhängt, wie der Inhalt der gesamten Linie angeordnet ist. Dies bedeutet, dass zur Berechnung der oberen Ausrichtung zuerst die Basislinienausrichtungen berechnet werden müssen. Das Element hat , daher wird dies nicht für die Grundlinienpositionierung verwendet. aber die und sind vertikal positioniert, so dass ihre Basislinien ausgerichtet sind. In diesem Fall hat sich die Höhe des Linienfelds erhöht, da das Element aufgrund der größeren Schriftgröße etwas nach oben verschoben wurde. Dann kann die obere Position für das Element berechnet werden, und diese befindet sich am oberen Rand des Linienfelds.
#middle
vertical-align:top
#left
#right
#right
#middle
quelle
Das Problem ist, dass Sie float angewendet haben: links auf dem zweiten div. Dadurch kommt das zweite Div auf die linke Seite und Ihr erstes Div fällt ab und kommt nach Ihrem zweiten Div. Wenn Sie float anwenden: links auch auf dem ersten div, ist Ihr Problem weg.
Überlauf: versteckt verursacht kein Problem mit Ihrem Layout, Überlauf: versteckt betrifft nur innere Elemente eines Div, es hat nichts mit anderen Elementen zu tun, die sich außerhalb befinden.
quelle
Versuchen Sie
padding:0;
, dem Körper etwas hinzuzufügen und den Rand Ihrer Divs zu entfernen.Fügen Sie
background-color:*any
neben dem Hintergrund * Farbe hinzu, um den Unterschied zu überprüfen.quelle
code
zB :.background-color:any color
Versuchen Sie, alle CSS-Eigenschaften aller Elemente gleich zu machen.
Ich hatte ein ähnliches Problem und als ich dieses Problem behebte, stellte ich fest, dass ich ein Element mit der Eigenschaft Font in Div Element ablegte.
Nach dem Löschen dieses Elements mit der Eigenschaft "Schriftart" wurde die Ausrichtung aller DIV gestört. Um dies zu beheben, setze ich die Font-Eigenschaft auf alle DIV-Elemente, die mit dem Element übereinstimmen, das darin abgelegt wird.
Im folgenden Beispiel wurde das abgelegte Element der Klasse ".dldCuboidButton" mit der Schriftgröße definiert: 30 px.
Also habe ich den verbleibenden Klassen, dh .cuboidRecycle, .liCollect, .dldCollect, die von DIV-Elementen verwendet werden, dieselbe Eigenschaft hinzugefügt. Auf diese Weise folgen alle DIV-Elemente denselben Messungen vor und nach dem Ablegen des Elements.
Hier ist das Beispiel von HTML, das dynamisch mit dem obigen CSS erstellt wurde.
quelle