我的内联块元素未正确排列

Question 1

内的所有元素.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。

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属性指定：

此属性影响由inline-level元素生成的框的线框内的垂直位置。

默认情况下，其值为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>

展开摘要

设置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>

展开摘要

确保元素没有流入线框，以便它们的基线将是它们的底部边缘。也就是说，内容应该不存在：

如果一个元素是浮动的，绝对定位的或者是根元素，则该元素被称为流出。一个元素被称为在流如果不是乱流。

因此，例如，您可以将元素的内容放入包装器中，并使用以下样式进行设置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>

展开摘要

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标签，这也会导致垂直对齐方式不规则，具体取决于您在其他地方定义的内容。