Moje elementy inline-block nie układają się prawidłowo

Question 1

Wszystkie elementy w środku .track-containerpowinny być ładnie ustawione w jednej linii, każdy obok siebie, ograniczone przez wysokość 200 pikseli, które otrzymały, bez żadnych dziwnych marginesów lub dopełnienia. Zamiast tego masz dziwność, która pojawia się we wspomnianych skrzypcach.

Co jest tego przyczyną .album-artworki co jest .track-infowypychane do połowy strony i jak mogę to naprawić? Przyznaję również, że tabela może być lepszym sposobem podejścia do całej tej konfiguracji, ale chcę rozwiązać problem na podstawie powyższego kodu, aby móc wyciągnąć wnioski z tego błędu.

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

Rozwiń fragment

Oto JSFiddle .

Question 2

10.8 Obliczanie wysokości linii: właściwości „line-height” i „vertical-align”

Linia bazowa „inline-block” jest linią bazową jego ostatniego pola liniowego w normalnym przepływie, chyba że nie ma pól wierszy w przepływie lub jeśli jego właściwość „overflow” ma obliczoną wartość inną niż „visible”, w w którym przypadku linia bazowa jest dolną krawędzią marginesu.

Jest to częsty problem dotyczący inline-blockelementów. W tym przypadku domyślną wartością vertical-alignwłaściwości jest baseline. Jeśli zmienisz wartość na top, będzie zachowywać się zgodnie z oczekiwaniami.

Zaktualizowany przykład

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

Question 3

Elementy wewnątrz .track-container są polami na poziomie liniowym w tym samym polu liniowym .

Dlatego ich wyrównanie w pionie jest określone przez vertical-alignwłaściwość:

Ta właściwość wpływa na pionowe pozycjonowanie wewnątrz pola liniowego pól generowanych przez element śródliniowy.

Domyślnie jego wartość to baseline :

Wyrównaj linię bazową prostokąta z linią bazową ramki nadrzędnej. Jeśli pudełko nie ma linii bazowej, wyrównaj dolną krawędź marginesu z linią bazową rodzica.

W tym przypadku wszystkie mają wartości bazowe, które są obliczane zgodnie z

Linia bazowa „inline-block” jest linią bazową jego ostatniego pola liniowego w normalnym przepływie, chyba że nie ma w nim pól wierszy w przepływie lub jeśli jego właściwość „overflow” ma obliczoną wartość inną niż „visible”, w w którym przypadku linia bazowa jest dolną krawędzią marginesu.

Poniższy obraz wyjaśnia, co się dzieje (czerwona linia to linia bazowa):

wprowadź opis obrazu tutaj

Dlatego możesz

Zmienić pionowe wyrównanie elementów, np top, middlelubbottom

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

Pokaż fragment kodu

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

Rozwiń fragment

Ustaw overflowelementy na coś innego niż visiblenp. hiddenLub auto, tak aby ich linia bazowa była dolną krawędzią marginesu.

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

Pokaż fragment kodu

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

Rozwiń fragment

Upewnij się, że elementy nie mają pola liniowego przepływu, tak aby ich linia bazowa była ich dolną krawędzią marginesu. Oznacza to, że zawartość powinna zniknąć :

Element jest nazywany poza przepływem, jeśli jest pływający, pozycjonowany bezwzględnie lub jest elementem głównym. Element jest nazywany przepływem, jeśli nie jest poza przepływem.

Na przykład możesz umieścić zawartość elementów w opakowaniu i nadać mu styl float: left:

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

Pokaż fragment kodu

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

Rozwiń fragment

Question 4

Musisz dodać vertical-align: top do tych dwóch elementów:

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

Przykład jsFiddle

Domyślne wyrównanie w pionie to linia bazowa, ale zamiast tego szukasz góry.

Question 5

Albo możesz ustawić float:left; na 3 elementy.

http://jsfiddle.net/fC2nt/

Question 6

Upewnij się, że stosunek wysokości linii na wszystkich elementach, które próbujesz wyrównać, jest również taki sam. Jeśli używasz kombinacji znaczników DIV, P, H1-5, DT, DD, INPUT, BUTTON, spowoduje to również nieregularności w wyrównaniu w pionie w zależności od tego, co już zdefiniowałeś w innym miejscu.