Meine Inline-Block-Elemente stimmen nicht richtig überein

Question 1

Alle darin enthaltenen Elemente .track-containersollten gut und in einer Linie nebeneinander angeordnet sein, eingeschränkt durch die 200-Pixel-Höhe, die sie ohne seltsame Ränder oder Polsterung erhalten haben. Stattdessen haben Sie die Seltsamkeit, die in der oben genannten Geige auftritt.

Was verursacht .album-artworkund wird .track-infoauf halber Höhe der Seite verschoben, und wie kann ich das beheben? Ich erkenne auch an, dass eine Tabelle eine bessere Möglichkeit ist, sich diesem gesamten Setup zu nähern, aber ich möchte das Problem anhand des obigen Codes herausfinden, damit ich aus diesem Fehler lernen kann.

.track-container {
    padding:0;
    width: 600px;
    height: 200px;
    border: 1px solid black;
    list-style-type: none;
    margin-bottom: 10px;
}

.position-data {
    overflow: none;
    display: inline-block;
    width: 12.5%;
    height: 200px;
    margin: 0;
    padding: 0;
    border: 1px solid black;
}

.current-position, .position-movement {
    height: 100px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid black;
}

.album-artwork {
    display: inline-block;
    height: 200px;
    width: 20%;
    border: 1px solid black;
}

.track-info {
    display: inline-block;
    padding-left: 10px;
    height: 200px;
    border: 1px solid black;
}

<div class="track-container">
    <div class="position-data">
        <div class="current-position">1</div>
        <div class="position-movement">2</div>
    </div>
    <div class="album-artwork">fdasfdsa</div>
    <div class="track-info">fdafdsa</div>
</div>

Erweitern Sie das Snippet

Hier ist eine JSFiddle .

Question 2

10.8 Berechnung der Linienhöhe: Die Eigenschaften 'Linienhöhe' und 'Vertikal ausrichten'

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.

Dies ist ein häufiges Problem bei inline-blockElementen. In diesem Fall ist der Standardwert der vertical-alignEigenschaft baseline. Wenn Sie den Wert in ändern top, verhält er sich wie erwartet.

Beispiel aktualisiert

.position-data {
    vertical-align: top;
}

Question 3

Die darin enthaltenen Elemente .track-containersind Felder auf Inline-Ebene im selben Zeilenfeld .

Daher wird ihre vertikale Ausrichtung durch die vertical-alignEigenschaft angegeben:

Diese Eigenschaft wirkt sich auf die vertikale Position innerhalb eines Linienfelds der Felder aus, die von einem Element auf Inline-Ebene generiert werden.

Standardmäßig lautet der Wert baseline:

Richten Sie die Grundlinie des Felds an der Grundlinie des übergeordneten Felds aus. Wenn das Feld keine Grundlinie hat, richten Sie die untere Randkante an der Grundlinie des übergeordneten Felds aus.

In diesem Fall haben alle Basislinien, die nach berechnet werden

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.

Das folgende Bild verdeutlicht, was passiert (die rote Linie ist die Grundlinie):

Geben Sie hier die Bildbeschreibung ein

Deshalb können Sie

Ändern , um die vertikale Ausrichtung der Elemente, beispielsweise auf top, middleoderbottom

.track-container > * {
  vertical-align: middle;
}

Code-Snippet anzeigen

.track-container {
  padding: 0;
  width: 600px;
  height: 200px;
  border: 1px solid black;
  list-style-type: none;
  margin-bottom: 10px;
}
.position-data {
  overflow: none;
  display: inline-block;
  width: 12.5%;
  height: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.current-position,
.position-movement {
  height: 100px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.album-artwork {
  display: inline-block;
  height: 200px;
  width: 20%;
  border: 1px solid black;
}
.track-info {
  display: inline-block;
  padding-left: 10px;
  height: 200px;
  border: 1px solid black;
}
.track-container > * {
  vertical-align: middle;
}

<div class="track-container">
  <div class="position-data">
    <div class="current-position">1</div>
    <div class="position-movement">2</div>
  </div>
  <div class="album-artwork">fdasfdsa</div>
  <div class="track-info">fdafdsa</div>
</div>

Erweitern Sie das Snippet

Stellen Sie die overflowElemente auf etwas anderes als visiblez. B. hiddenoder ein auto, sodass ihre Grundlinie die untere Randkante ist.

.track-container > * {
  overflow: hidden;
}

Code-Snippet anzeigen

.track-container {
  padding: 0;
  width: 600px;
  height: 200px;
  border: 1px solid black;
  list-style-type: none;
  margin-bottom: 10px;
}
.position-data {
  overflow: none;
  display: inline-block;
  width: 12.5%;
  height: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.current-position,
.position-movement {
  height: 100px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.album-artwork {
  display: inline-block;
  height: 200px;
  width: 20%;
  border: 1px solid black;
}
.track-info {
  display: inline-block;
  padding-left: 10px;
  height: 200px;
  border: 1px solid black;
}
.track-container > * {
  overflow: hidden;
}

<div class="track-container">
  <div class="position-data">
    <div class="current-position">1</div>
    <div class="position-movement">2</div>
  </div>
  <div class="album-artwork">fdasfdsa</div>
  <div class="track-info">fdafdsa</div>
</div>

Erweitern Sie das Snippet

Stellen Sie sicher, dass die Elemente kein In-Flow-Linienfeld haben, damit ihre Grundlinie ihre untere Randkante ist. Das heißt, der Inhalt sollte nicht mehr fließen :

Ein Element wird als nicht fließend bezeichnet, wenn es schwebend, absolut positioniert oder das Wurzelelement ist. Ein Element wird als In-Flow bezeichnet, wenn es nicht außerhalb des Flusses liegt.

So können Sie beispielsweise den Inhalt der Elemente in einen Wrapper einfügen und ihn wie folgt gestalten float: left:

.track-container > * > .wrapper {
  float: left;
}

Code-Snippet anzeigen

.track-container {
  padding: 0;
  width: 600px;
  height: 200px;
  border: 1px solid black;
  list-style-type: none;
  margin-bottom: 10px;
}
.position-data {
  overflow: none;
  display: inline-block;
  width: 12.5%;
  height: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.current-position,
.position-movement {
  height: 100px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.album-artwork {
  display: inline-block;
  height: 200px;
  width: 20%;
  border: 1px solid black;
}
.track-info {
  display: inline-block;
  padding-left: 10px;
  height: 200px;
  border: 1px solid black;
}
.track-container > * > .wrapper {
  float: left;
}

<div class="track-container">
  <div class="position-data">
    <div class="current-position wrapper">1</div>
    <div class="position-movement wrapper">2</div>
  </div>
  <div class="album-artwork">
    <span class="wrapper">fdasfdsa</span>
  </div>
  <div class="track-info">
    <span class="wrapper">fdafdsa</span>
  </div>
</div>

Erweitern Sie das Snippet

Question 4

Sie müssen diesen beiden Elementen vertikal ausrichten: oben hinzufügen:

.album-artwork, .track-info {
    vertical-align:top;
}

jsFiddle Beispiel

Die standardmäßige vertikale Ausrichtung ist die Grundlinie, aber Sie suchen stattdessen nach oben.

Question 5

Oder Sie können float:left;3 Elemente einstellen .

http://jsfiddle.net/fC2nt/

Question 6

Stellen Sie sicher, dass das Zeilenhöhenverhältnis für alle Elemente, die Sie ausrichten möchten, ebenfalls gleich ist. Wenn Sie eine Mischung aus DIV-, P-, H1-5-, DT-, DD-, INPUT- und BUTTON-Tags verwenden, führt dies auch zu Unregelmäßigkeiten bei der vertikalen Ausrichtung, je nachdem, was Sie bereits an anderer Stelle definiert haben.

Answer 1

Alle darin enthaltenen Elemente .track-containersollten gut und in einer Linie nebeneinander angeordnet sein, eingeschränkt durch die 200-Pixel-Höhe, die sie ohne seltsame Ränder oder Polsterung erhalten haben. Stattdessen haben Sie die Seltsamkeit, die in der oben genannten Geige auftritt.

Was verursacht .album-artworkund wird .track-infoauf halber Höhe der Seite verschoben, und wie kann ich das beheben? Ich erkenne auch an, dass eine Tabelle eine bessere Möglichkeit ist, sich diesem gesamten Setup zu nähern, aber ich möchte das Problem anhand des obigen Codes herausfinden, damit ich aus diesem Fehler lernen kann.

.track-container {
    padding:0;
    width: 600px;
    height: 200px;
    border: 1px solid black;
    list-style-type: none;
    margin-bottom: 10px;
}

.position-data {
    overflow: none;
    display: inline-block;
    width: 12.5%;
    height: 200px;
    margin: 0;
    padding: 0;
    border: 1px solid black;
}

.current-position, .position-movement {
    height: 100px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid black;
}

.album-artwork {
    display: inline-block;
    height: 200px;
    width: 20%;
    border: 1px solid black;
}

.track-info {
    display: inline-block;
    padding-left: 10px;
    height: 200px;
    border: 1px solid black;
}

<div class="track-container">
    <div class="position-data">
        <div class="current-position">1</div>
        <div class="position-movement">2</div>
    </div>
    <div class="album-artwork">fdasfdsa</div>
    <div class="track-info">fdafdsa</div>
</div>

Erweitern Sie das Snippet

Hier ist eine JSFiddle .

Answer 2

179

10.8 Berechnung der Linienhöhe: Die Eigenschaften 'Linienhöhe' und 'Vertikal ausrichten'

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.

Dies ist ein häufiges Problem bei inline-blockElementen. In diesem Fall ist der Standardwert der vertical-alignEigenschaft baseline. Wenn Sie den Wert in ändern top, verhält er sich wie erwartet.

Beispiel aktualisiert

.position-data {
    vertical-align: top;
}

Josh Crozier
quelle

2

Vielen Dank! Habe lange gesucht. Mein Problem war das Einfügen von HTML in Inline-Block-Elemente, was sich auf die vertikale Position auswirkte. Problem nur in Safari sichtbar.

Kapoko

2

Ich habe alles versucht, dies hat mein Problem sofort behoben!

Xorinzor

2

rettete meinen Tag bro

osyan

3

Ich habe so viel Zeit mit diesem Thema verbracht, da mein innerer Div in meinem React-Projekt nicht ausgerichtet wurde. Das hat mir buchstäblich Stunden gespart!

SeaWarrior404

3

5 Jahre später immer noch Leben retten. Vielen Dank!

Seu Madruga

Answer 3

2

Vielen Dank! Habe lange gesucht. Mein Problem war das Einfügen von HTML in Inline-Block-Elemente, was sich auf die vertikale Position auswirkte. Problem nur in Safari sichtbar.

Kapoko

Answer 4

2

Ich habe alles versucht, dies hat mein Problem sofort behoben!

Xorinzor

Answer 5

2

rettete meinen Tag bro

osyan

Answer 6

3

Ich habe so viel Zeit mit diesem Thema verbracht, da mein innerer Div in meinem React-Projekt nicht ausgerichtet wurde. Das hat mir buchstäblich Stunden gespart!

SeaWarrior404

Answer 7

3

5 Jahre später immer noch Leben retten. Vielen Dank!

Seu Madruga

Answer 8

Die darin enthaltenen Elemente .track-containersind Felder auf Inline-Ebene im selben Zeilenfeld .

Daher wird ihre vertikale Ausrichtung durch die vertical-alignEigenschaft angegeben:

Diese Eigenschaft wirkt sich auf die vertikale Position innerhalb eines Linienfelds der Felder aus, die von einem Element auf Inline-Ebene generiert werden.

Standardmäßig lautet der Wert baseline:

Richten Sie die Grundlinie des Felds an der Grundlinie des übergeordneten Felds aus. Wenn das Feld keine Grundlinie hat, richten Sie die untere Randkante an der Grundlinie des übergeordneten Felds aus.

In diesem Fall haben alle Basislinien, die nach berechnet werden

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.

Das folgende Bild verdeutlicht, was passiert (die rote Linie ist die Grundlinie):

Geben Sie hier die Bildbeschreibung ein

Deshalb können Sie

Ändern , um die vertikale Ausrichtung der Elemente, beispielsweise auf top, middleoderbottom

.track-container > * {
  vertical-align: middle;
}

Code-Snippet anzeigen

.track-container {
  padding: 0;
  width: 600px;
  height: 200px;
  border: 1px solid black;
  list-style-type: none;
  margin-bottom: 10px;
}
.position-data {
  overflow: none;
  display: inline-block;
  width: 12.5%;
  height: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.current-position,
.position-movement {
  height: 100px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.album-artwork {
  display: inline-block;
  height: 200px;
  width: 20%;
  border: 1px solid black;
}
.track-info {
  display: inline-block;
  padding-left: 10px;
  height: 200px;
  border: 1px solid black;
}
.track-container > * {
  vertical-align: middle;
}

<div class="track-container">
  <div class="position-data">
    <div class="current-position">1</div>
    <div class="position-movement">2</div>
  </div>
  <div class="album-artwork">fdasfdsa</div>
  <div class="track-info">fdafdsa</div>
</div>

Erweitern Sie das Snippet

Stellen Sie die overflowElemente auf etwas anderes als visiblez. B. hiddenoder ein auto, sodass ihre Grundlinie die untere Randkante ist.

.track-container > * {
  overflow: hidden;
}

Code-Snippet anzeigen

.track-container {
  padding: 0;
  width: 600px;
  height: 200px;
  border: 1px solid black;
  list-style-type: none;
  margin-bottom: 10px;
}
.position-data {
  overflow: none;
  display: inline-block;
  width: 12.5%;
  height: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.current-position,
.position-movement {
  height: 100px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.album-artwork {
  display: inline-block;
  height: 200px;
  width: 20%;
  border: 1px solid black;
}
.track-info {
  display: inline-block;
  padding-left: 10px;
  height: 200px;
  border: 1px solid black;
}
.track-container > * {
  overflow: hidden;
}

<div class="track-container">
  <div class="position-data">
    <div class="current-position">1</div>
    <div class="position-movement">2</div>
  </div>
  <div class="album-artwork">fdasfdsa</div>
  <div class="track-info">fdafdsa</div>
</div>

Erweitern Sie das Snippet

Stellen Sie sicher, dass die Elemente kein In-Flow-Linienfeld haben, damit ihre Grundlinie ihre untere Randkante ist. Das heißt, der Inhalt sollte nicht mehr fließen :

Ein Element wird als nicht fließend bezeichnet, wenn es schwebend, absolut positioniert oder das Wurzelelement ist. Ein Element wird als In-Flow bezeichnet, wenn es nicht außerhalb des Flusses liegt.

So können Sie beispielsweise den Inhalt der Elemente in einen Wrapper einfügen und ihn wie folgt gestalten float: left:

.track-container > * > .wrapper {
  float: left;
}

Code-Snippet anzeigen

.track-container {
  padding: 0;
  width: 600px;
  height: 200px;
  border: 1px solid black;
  list-style-type: none;
  margin-bottom: 10px;
}
.position-data {
  overflow: none;
  display: inline-block;
  width: 12.5%;
  height: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.current-position,
.position-movement {
  height: 100px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.album-artwork {
  display: inline-block;
  height: 200px;
  width: 20%;
  border: 1px solid black;
}
.track-info {
  display: inline-block;
  padding-left: 10px;
  height: 200px;
  border: 1px solid black;
}
.track-container > * > .wrapper {
  float: left;
}

<div class="track-container">
  <div class="position-data">
    <div class="current-position wrapper">1</div>
    <div class="position-movement wrapper">2</div>
  </div>
  <div class="album-artwork">
    <span class="wrapper">fdasfdsa</span>
  </div>
  <div class="track-info">
    <span class="wrapper">fdafdsa</span>
  </div>
</div>

Erweitern Sie das Snippet

Answer 9

2

viel detaillierter und besser erklärt als die akzeptierte Antwort. Ich

Answer 10

1

@ user141554 Danke :) Beachten Sie, dass diese Antwort viel aktueller ist als die anderen, daher ist es normal, weniger Upvotes zu haben.

Oriol

Answer 11

8

Sie müssen diesen beiden Elementen vertikal ausrichten: oben hinzufügen:

.album-artwork, .track-info {
    vertical-align:top;
}

jsFiddle Beispiel

Die standardmäßige vertikale Ausrichtung ist die Grundlinie, aber Sie suchen stattdessen nach oben.

j08691
quelle

Zur Vereinfachung würde ich .track-container div {vertikal ausrichten: oben;}

Cam

Answer 12

Zur Vereinfachung würde ich .track-container div {vertikal ausrichten: oben;}

Cam

Answer 13

1

Oder Sie können float:left;3 Elemente einstellen .

http://jsfiddle.net/fC2nt/

Szymon
quelle

Das würde funktionieren, aber es macht den Zweck der Verwendung von inline-blockElementen zunichte.

Josh Crozier

stimmt, du hast recht. Ich lösche diese Antwort nicht, es könnte eine Lektion für jemanden sein :)

Szymon

1

Sie haben Recht - 1+ .. muss overflow:hiddenmöglicherweise zusätzlich zum übergeordneten Element hinzugefügt werden, um die schwebenden Elemente zu enthalten. Sie sollten jedoch eine Demo hinzufügen, die dies demonstriert.

Josh Crozier

Answer 14

Das würde funktionieren, aber es macht den Zweck der Verwendung von inline-blockElementen zunichte.

Josh Crozier

Answer 15

stimmt, du hast recht. Ich lösche diese Antwort nicht, es könnte eine Lektion für jemanden sein :)

Szymon

Answer 16

1

Sie haben Recht - 1+ .. muss overflow:hiddenmöglicherweise zusätzlich zum übergeordneten Element hinzugefügt werden, um die schwebenden Elemente zu enthalten. Sie sollten jedoch eine Demo hinzufügen, die dies demonstriert.

Josh Crozier

Answer 17

Stellen Sie sicher, dass das Zeilenhöhenverhältnis für alle Elemente, die Sie ausrichten möchten, ebenfalls gleich ist. Wenn Sie eine Mischung aus DIV-, P-, H1-5-, DT-, DD-, INPUT- und BUTTON-Tags verwenden, führt dies auch zu Unregelmäßigkeiten bei der vertikalen Ausrichtung, je nachdem, was Sie bereits an anderer Stelle definiert haben.

Meine Inline-Block-Elemente stimmen nicht richtig überein

Antworten: