Мои 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, это также вызовет неровности в вертикальном выравнивании в зависимости от того, что вы уже определили в другом месте.