Мої елементи вбудованого блоку вишикуються неправильно

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 Розрахунки висоти лінії: властивості "висота лінії" та "вертикальне вирівнювання"

Базова лінія 'inline-block' є базовою лінією останнього рядка в звичайному потоці, якщо він не має або рядків вхідного рядка, або якщо його властивість 'overflow' має обчислюване значення, відмінне від 'visible', у в цьому випадку базовою лінією є нижній край поля.

Це загальне питання, що включає inline-blockелементи. У цьому випадку значення vertical-alignвластивості за замовчуванням становить baseline. Якщо ви зміните значення на top, воно буде поводитись, як очікувалося.

Оновлений приклад

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

Question 3

Елементи всередині - .track-containerце рядки на рівні рядка в одному рядку .

Тому їх вертикальне вирівнювання визначається vertical-alignвластивістю:

Ця властивість впливає на вертикальне розташування всередині рядка вікон, створених елементом рівня вбудованого.

За замовчуванням його значення baseline:

Вирівняйте базову лінію поля з базовою лінією батьківського поля. Якщо поле не має базової лінії, вирівняйте нижній край поля з базовою лінією батьків.

У цьому випадку всі вони мають базові лінії, які розраховуються відповідно до

Базова лінія 'inline-block' є базовою лінією останнього рядка в звичайному потоці, якщо він не має або рядків вхідного рядка, або якщо його властивість 'overflow' має обчислюване значення, відмінне від 'visible', у в цьому випадку базовою лінією є нижній край поля.

Наступне зображення пояснює, що відбувається (червона лінія є базовою лінією):

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

Тому можна

Змінити вертикальне вирівнювання елементів, наприклад, до 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>

Expand snippet

Встановіть 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>

Expand snippet

Переконайтесь, що в елементах немає поля вхідної лінії, щоб їх базовою лінією був нижній край поля. Тобто вміст повинен бути неточним :

Елемент викликається поза потоком, якщо він плаваючий, абсолютно позиціонований або є кореневим елементом. Елемент називається потоком, якщо він не є потоком.

Так, наприклад, ви можете помістити вміст елементів у обгортку та стилізувати його за допомогою 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>

Expand snippet

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, це також призведе до нерівностей у вертикальному вирівнюванні залежно від того, що ви вже визначили в іншому місці.