My inline-block elements are not lining up properly

Question

All of the elements within .track-container should line up nice and in line, each side by side, constrained by the 200px height they've been given with no weird margins or padding. Instead, you have the strangeness that occurs in the aforementioned fiddle.

What is causing .album-artwork and .track-info to get pushed halfway down the page, and how can I fix it? Also, I acknowledge that a table may be a better way of approaching this whole setup, but I want to figure out the problem from the code above so I can learn from this mistake.

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

Here's a JSFiddle.

Answer 1

10.8线高计算:'line-height'和'vertical-align'属性

"内联块"的基线是正常流程中其最后一个线框的基线,除非它没有流入线框或者其"溢出"属性具有"可见"以外的计算值,在哪种情况下,基线是底部边缘边缘.

这是涉及inline-block元素的常见问题.在这种情况下,vertical-align属性的默认值为baseline.如果将值更改为top,则它将按预期运行.

更新的示例

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

Answer 2

里面的元素.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>

• 确保元素没有流入线框,因此它们的基线将是它们的底边距边缘.也就是说,内容应该是不流动的:

  如果元素浮动,绝对定位或是根元素,则称其为流出流.如果元素不是流出的,则称其为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>

Answer 3

您需要将vertical-align:top添加到这两个元素:

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

jsFiddle例子

默认的垂直对齐方式是基线,但您正在寻找顶部.