我的内联块元素没有正确排列。

Question

我的内联块元素没有正确排列。所有元素.track-container应该很好地排成一行，每条线并排，受到200 px高度的限制，没有奇怪的边距或填充。相反，你有发生在上述小提琴中的奇怪之处。是什么导致了.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.

Answer 1

10.8线高计算：“线高”和“垂直对齐”属性

“内联块”的基线是其在正常流中的最后一行框的基线，除非它没有流内行框，或者它的“溢出”属性具有“可见”以外的计算值，在这种情况下，基线是底部边距。

这是一个常见的问题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，G.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>

Answer 3

您需要将垂直对齐：顶部添加到这两个元素中：

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

jsFiddle示例

默认的垂直对齐是基线，但您正在寻找顶部。