Мои inline-block элементы не выстраиваются должным образом

Question 1

Все элементы внутри .track-containerдолжны быть хорошо выстроены в линию, каждый бок о бок, ограниченный высотой 200 пикселей, без каких-либо странных полей или отступов. Вместо этого у вас есть странность, которая возникает в вышеупомянутой скрипке.

Что вызывает .album-artworkи .track-infoполучить толкнул на полпути вниз страницы, и как я могу это исправить? Кроме того, я признаю, что таблица может быть лучшим способом приблизиться ко всей этой настройке, но я хочу выяснить проблему из приведенного выше кода, чтобы я мог извлечь уроки из этой ошибки.

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

Развернуть фрагмент

Вот JSFiddle .

Question 2

10.8 Расчет высоты строки: свойства line-height и vertical-align

Базовая линия «встроенного блока» - это базовая линия его последнего линейного блока в нормальном потоке, если только он не имеет ни одного встроенного линейного блока, или если его свойство «переполнение» имеет вычисленное значение, отличное от «видимого», в в этом случае базовая линия - это край нижнего поля.

Это обычная проблема, связанная с inline-blockэлементами. В этом случае значение vertical-alignсвойства по умолчанию - baseline. Если вы измените значение на top, оно будет вести себя так, как ожидалось.

Обновленный пример

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

Question 3

Элементы внутри .track-container- это блоки встроенного уровня в одном строчном блоке .

Поэтому их вертикальное выравнивание задается vertical-alignсвойством:

Это свойство влияет на вертикальное позиционирование внутри линейного блока блоков, созданных элементом встроенного уровня.

По умолчанию его значение baseline:

Совместите базовую линию блока с базовой линией родительского блока. Если у блока нет базовой линии, выровняйте край нижнего поля с базовой линией родителя.

В этом случае все они имеют базовые значения, которые рассчитываются согласно

Базовая линия «встроенного блока» - это базовая линия его последнего линейного блока в нормальном потоке, если только он не имеет ни одного встроенного линейного блока, или если его свойство «переполнение» имеет вычисленное значение, отличное от «видимого», в в этом случае базовая линия - это край нижнего поля.

Следующее изображение поясняет, что происходит (красная линия - базовая линия):

введите описание изображения здесь

Следовательно, вы можете

Измените вертикальное выравнивание элементов, например, на top, middleилиbottom

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

Показать фрагмент кода

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

Развернуть фрагмент

Установите overflowэлементы, отличные от visible, например, hiddenили auto, чтобы их базовая линия была их нижним краем поля.

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

Показать фрагмент кода

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

Развернуть фрагмент

Убедитесь, что у элементов нет проходной линейной рамки, так что их базовая линия будет их нижним краем поля. То есть содержимое должно быть вне потока :

Элемент вызывается вне потока, если он плавающий, абсолютно позиционированный или является корневым элементом. Элемент называется входящим, если он не выходит из потока.

Так, например, вы можете поместить содержимое элементов в оболочку и стилизовать его с помощью float: left:

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

Показать фрагмент кода

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

Развернуть фрагмент

Question 4

Вам нужно добавить vertical-align: top к этим двум элементам:

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

jsFiddle пример

Вертикальное выравнивание по умолчанию - базовое, но вместо этого вы ищите верх.

Question 5

Или вы можете установить float:left;до 3 элементов.

http://jsfiddle.net/fC2nt/

Question 6

Убедитесь, что соотношение высоты строки для всех элементов, которые вы пытаетесь выровнять, одинаковое. Если вы используете сочетание тегов DIV, P, H1-5, DT, DD, INPUT, BUTTON, это также вызовет неровности в вертикальном выравнивании в зависимости от того, что вы уже определили в другом месте.

Answer 1

Все элементы внутри .track-containerдолжны быть хорошо выстроены в линию, каждый бок о бок, ограниченный высотой 200 пикселей, без каких-либо странных полей или отступов. Вместо этого у вас есть странность, которая возникает в вышеупомянутой скрипке.

Что вызывает .album-artworkи .track-infoполучить толкнул на полпути вниз страницы, и как я могу это исправить? Кроме того, я признаю, что таблица может быть лучшим способом приблизиться ко всей этой настройке, но я хочу выяснить проблему из приведенного выше кода, чтобы я мог извлечь уроки из этой ошибки.

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

Развернуть фрагмент

Вот JSFiddle .

Answer 2

180

10.8 Расчет высоты строки: свойства line-height и vertical-align

Базовая линия «встроенного блока» - это базовая линия его последнего линейного блока в нормальном потоке, если только он не имеет ни одного встроенного линейного блока, или если его свойство «переполнение» имеет вычисленное значение, отличное от «видимого», в в этом случае базовая линия - это край нижнего поля.

Это обычная проблема, связанная с inline-blockэлементами. В этом случае значение vertical-alignсвойства по умолчанию - baseline. Если вы измените значение на top, оно будет вести себя так, как ожидалось.

Обновленный пример

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

Джош Крозье
источник

2

Спасибо! Искали целую вечность. Моя проблема заключалась в вставке html в элементы встроенного блока, что повлияло на вертикальное положение. Проблема видна только в Safari.

kapoko

2

Я пробовал все, это сразу устранило мою проблему!

xorinzor 03

2

спас мой день братан

osyan

3

Я потратил так много времени на эту проблему, поскольку мой внутренний div не выравнивался в моем проекте React. Это буквально сэкономило мне часы!

SeaWarrior404 05

3

Спустя 5 лет все еще спасает жизни. Спасибо!

Сеу Мадруга

Answer 3

2

Спасибо! Искали целую вечность. Моя проблема заключалась в вставке html в элементы встроенного блока, что повлияло на вертикальное положение. Проблема видна только в Safari.

kapoko

Answer 4

2

Я пробовал все, это сразу устранило мою проблему!

xorinzor 03

Answer 5

2

спас мой день братан

osyan

Answer 6

3

Я потратил так много времени на эту проблему, поскольку мой внутренний div не выравнивался в моем проекте React. Это буквально сэкономило мне часы!

SeaWarrior404 05

Answer 7

3

Спустя 5 лет все еще спасает жизни. Спасибо!

Сеу Мадруга

Answer 8

Элементы внутри .track-container- это блоки встроенного уровня в одном строчном блоке .

Поэтому их вертикальное выравнивание задается vertical-alignсвойством:

Это свойство влияет на вертикальное позиционирование внутри линейного блока блоков, созданных элементом встроенного уровня.

По умолчанию его значение baseline:

Совместите базовую линию блока с базовой линией родительского блока. Если у блока нет базовой линии, выровняйте край нижнего поля с базовой линией родителя.

В этом случае все они имеют базовые значения, которые рассчитываются согласно

Базовая линия «встроенного блока» - это базовая линия его последнего линейного блока в нормальном потоке, если только он не имеет ни одного встроенного линейного блока, или если его свойство «переполнение» имеет вычисленное значение, отличное от «видимого», в в этом случае базовая линия - это край нижнего поля.

Следующее изображение поясняет, что происходит (красная линия - базовая линия):

введите описание изображения здесь

Следовательно, вы можете

Измените вертикальное выравнивание элементов, например, на top, middleилиbottom

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

Показать фрагмент кода

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

Развернуть фрагмент

Установите overflowэлементы, отличные от visible, например, hiddenили auto, чтобы их базовая линия была их нижним краем поля.

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

Показать фрагмент кода

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

Развернуть фрагмент

Убедитесь, что у элементов нет проходной линейной рамки, так что их базовая линия будет их нижним краем поля. То есть содержимое должно быть вне потока :

Элемент вызывается вне потока, если он плавающий, абсолютно позиционированный или является корневым элементом. Элемент называется входящим, если он не выходит из потока.

Так, например, вы можете поместить содержимое элементов в оболочку и стилизовать его с помощью float: left:

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

Показать фрагмент кода

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

Развернуть фрагмент

Answer 9

2

способ более подробный и лучше объясненный, чем принятый ответ. Интересно, почему за это не проголосовали больше

Answer 10

1

@ user141554 Спасибо :) Обратите внимание, что этот ответ намного более свежий, чем другие, поэтому меньшее количество голосов является нормальным.

Oriol

Answer 11

8

Вам нужно добавить vertical-align: top к этим двум элементам:

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

jsFiddle пример

Вертикальное выравнивание по умолчанию - базовое, но вместо этого вы ищите верх.

j08691
источник

Для упрощения я бы сделал .track-container div {vertical-align: top;}

Cam

Answer 12

Для упрощения я бы сделал .track-container div {vertical-align: top;}

Cam

Answer 13

1

Или вы можете установить float:left;до 3 элементов.

http://jsfiddle.net/fC2nt/

Шимон
источник

Это сработает, но это противоречит цели использования inline-blockэлементов.

Джош Крозье,

правда, ты прав. Я не удаляю этот anwser, это может быть уроком для кого-то :)

Szymon

1

Вы правы - 1+ .. кроме того, overflow:hiddenможет потребоваться добавить к родительскому элементу, чтобы содержать плавающие элементы. Вы должны добавить демо, демонстрирующее это.

Джош Крозье

Answer 14

Это сработает, но это противоречит цели использования inline-blockэлементов.

Джош Крозье,

Answer 15

правда, ты прав. Я не удаляю этот anwser, это может быть уроком для кого-то :)

Szymon

Answer 16

1

Вы правы - 1+ .. кроме того, overflow:hiddenможет потребоваться добавить к родительскому элементу, чтобы содержать плавающие элементы. Вы должны добавить демо, демонстрирующее это.

Джош Крозье

Answer 17

Убедитесь, что соотношение высоты строки для всех элементов, которые вы пытаетесь выровнять, одинаковое. Если вы используете сочетание тегов DIV, P, H1-5, DT, DD, INPUT, BUTTON, это также вызовет неровности в вертикальном выравнивании в зависимости от того, что вы уже определили в другом месте.

Мои inline-block элементы не выстраиваются должным образом

Ответы: