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

все элементы внутри .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>

здесь JSFiddle.

5 60
html css

5 ответов:

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

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

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

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

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

элементы внутри .track-container are инлайн-уровня коробки в том же строке.

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

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

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

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

в этом случае все они имеют исходные линии, которые рассчитываются в соответствии с

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

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

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>

  • установить 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>

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

    элемент называется из потока если он плавает, абсолютно позиционируется или является корневым элементом. Элемент называется in-flow если это не вне потока.

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

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

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

пример jsFiddle

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

8

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

http://jsfiddle.net/fC2nt/

1

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

1