Meine Inline-Block-Elemente stimmen nicht richtig überein

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>

Hier ist eine JSFiddle .

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

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

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>

  Führen Sie das Code-Snippet ausErgebnisse ausblenden

  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>

  Führen Sie das Code-Snippet ausErgebnisse ausblenden

  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>

  Führen Sie das Code-Snippet ausErgebnisse ausblenden

  Erweitern Sie das Snippet

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.

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

http://jsfiddle.net/fC2nt/

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.