87

里面的所有元素都.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。

4

5 回答 5

190

10.8 行高计算：'line-height' 和 'vertical-align' 属性

'inline-block' 的基线是它在正常流中的最后一个行框的基线，除非它没有流入行框，或者如果它的 'overflow' 属性具有除 'visible' 之外的计算值，在在这种情况下，基线是底部边距边缘。

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

更新示例

.position-data {
    vertical-align: top;
}
于 2013-10-14T18:10:53.593 回答
34

里面的元素.track-container是同一个line box中的行内级盒子。

因此，它们的垂直对齐方式由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>

  • 将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>

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

    如果一个元素是浮动的、绝对定位的或者是根元素，那么它就被称为out of 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>

于 2015-06-26T00:53:34.117 回答
8

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

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

jsFiddle 示例

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

于 2013-10-14T18:11:53.200 回答
1

或者您可以设置float:left;为 3 个元素。

http://jsfiddle.net/fC2nt/

于 2013-10-14T18:24:27.593 回答
1

确保您尝试对齐的所有元素的行高比也相同。如果您混合使用 DIV、P、H1-5、DT、DD、INPUT、BUTTON 标签，这也会导致垂直对齐不规则，具体取决于您已在别处定义的内容。

于 2013-10-14T19:00:03.957 回答