Мои элементы встроенного блока не выстраиваются правильно

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

Что вызывает нажатие .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>

Ответы

Ответ 1

10.8 Расчет высоты линии: свойства 'line-height' и 'vertical-align'

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

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

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

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

Ответ 2

Элементы внутри .track-container являются inline-level в том же окне .

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

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

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

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

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

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

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

enter image description here

Поэтому вы можете

  • Измените вертикальное выравнивание элементов, например. до 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>

Ответ 3

Вам нужно добавить вертикальное выравнивание: сверху к этим двум элементам:

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

Пример jsFiddle

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

Ответ 5

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