我的 inline-block 元素没有正确排列答案

【问题标题】：My inline-block elements are not lining up properly我的 inline-block 元素没有正确排列
【发布时间】：2013-10-22 09:10:53
【问题描述】：

.track-container 中的所有元素都应该排成一排，并排排列，并受到 200 像素高度的限制，没有奇怪的边距或填充。相反，您会遇到上述小提琴中出现的奇怪现象。

是什么导致.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。

【问题讨论】：

标签： html css

【解决方案1】：

.track-container 内的元素是inline-level 同一个line box 中的框。

因此，它们的垂直对齐方式由vertical-align 属性指定：

这个属性会影响一个线框内的垂直定位由内联元素生成的框。

默认为baseline:

将框的基线与父框的基线对齐。如果盒子没有基线，将底部边缘对齐父母的基线。

在这种情况下，它们都有基线，根据

'inline-block' 的基线是其最后一个行框的基线在正常流程中，除非它没有流入线框或如果它的“溢出”属性具有除“可见”之外的计算值，在在这种情况下，基线是底部边距。

下图阐明了正在发生的事情（红线是基线）：

因此，你可以

更改元素的垂直对齐方式，例如转至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:

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

【讨论】：

比接受的答案更详细，解释得更好。想知道为什么这没有得到更多的支持
@user141554 谢谢 :) 请注意，此答案比其他答案更新得多，因此投票数较少是正常的。

【解决方案2】：

10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

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

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

Updated Example

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

【讨论】：

谢谢！找了好多年。我的问题是将 html 插入到 inline-block 元素中，这会影响垂直位置。问题仅在 Safari 中可见。
我一直在尝试一切，这样做立即解决了我的问题！
拯救了我的一天，兄弟
我在这个问题上花了很多时间，因为我的内部 div 没有在我的 React 项目中对齐。这确实为我节省了几个小时！
5 年后，仍然在挽救生命。谢谢！

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

http://jsfiddle.net/fC2nt/

【讨论】：

这可行，但它违背了使用inline-block 元素的目的。
真的，你是对的。我不会删除这个答案，这可能是给某人的教训:)
你是对的 - 1+.. 此外，overflow:hidden 可能需要添加到父元素中才能包含浮动元素。不过，您应该添加一个演示。

【解决方案5】：

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

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

jsFiddle example

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

【讨论】：

为了简化我会做 .track-container div { vertical-align: top;}