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.

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

Answer 2

180

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

Josh Crozier
źródło

2

Dziękuję Ci! Szukałem od wieków. Mój problem polegał na wstawianiu html do elementów inline-block, co miało wpływ na pozycję pionową. Problem widoczny tylko w Safari.

kapoko

2

Próbowałem wszystkiego, robiąc to, natychmiast rozwiązałem mój problem!

xorinzor

2

Uratował mój dzień brachu

osyan

3

Spędziłem dużo czasu nad tym problemem, ponieważ mój wewnętrzny div nie został wyrównany w moim projekcie React. To dosłownie zaoszczędziło mi godziny!

SeaWarrior404

3

5 lat później wciąż ratuje życie. Dziękuję Ci!

Seu Madruga,

Answer 3

2

Dziękuję Ci! Szukałem od wieków. Mój problem polegał na wstawianiu html do elementów inline-block, co miało wpływ na pozycję pionową. Problem widoczny tylko w Safari.

kapoko

Answer 4

2

Próbowałem wszystkiego, robiąc to, natychmiast rozwiązałem mój problem!

xorinzor

Answer 5

2

Uratował mój dzień brachu

osyan

Answer 6

3

Spędziłem dużo czasu nad tym problemem, ponieważ mój wewnętrzny div nie został wyrównany w moim projekcie React. To dosłownie zaoszczędziło mi godziny!

SeaWarrior404

Answer 7

3

5 lat później wciąż ratuje życie. Dziękuję Ci!

Seu Madruga,

Answer 8

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

Answer 9

2

dużo bardziej szczegółowe i lepiej wyjaśnione niż zaakceptowana odpowiedź. Zastanawiam się, dlaczego nie zostało to bardziej

Answer 10

1

@ user141554 Thanks :) Zauważ, że ta odpowiedź jest dużo nowsza niż inne, więc posiadanie mniejszej liczby głosów za jest normalne.

Oriol

Answer 11

8

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.

j08691
źródło

Aby uprościć, zrobiłbym .track-container div {vertical-align: top;}

Cam

Answer 12

Aby uprościć, zrobiłbym .track-container div {vertical-align: top;}

Cam

Answer 13

1

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

http://jsfiddle.net/fC2nt/

Szymon
źródło

To by działało, ale przeczy celowi używania inline-block elementów.

Josh Crozier

prawda, masz rację. Nie usuwam tej odpowiedzi, to może być lekcja dla kogoś :)

Szymon

1

Masz rację - 1+ ... dodatkowo overflow:hiddenmoże być konieczne dodanie do elementu nadrzędnego, aby zawierał elementy pływające. Powinieneś jednak dodać demo, które to demonstruje.

Josh Crozier,

Answer 14

To by działało, ale przeczy celowi używania inline-block elementów.

Josh Crozier

Answer 15

prawda, masz rację. Nie usuwam tej odpowiedzi, to może być lekcja dla kogoś :)

Szymon

Answer 16

1

Masz rację - 1+ ... dodatkowo overflow:hiddenmoże być konieczne dodanie do elementu nadrzędnego, aby zawierał elementy pływające. Powinieneś jednak dodać demo, które to demonstruje.

Josh Crozier,

Answer 17

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.

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

Odpowiedzi: