Question

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

Answer 1

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

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

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

Updated Example

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

Answer 2

/* Other "Controller" function Code... */ this.methodC = function methodC () { return deps.$modalInstance.$close(); }; /* /Other "Controller" function Code... */内的元素是同一inline-level中的line box个框。

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

此属性会影响行框内的垂直定位由内联级元素生成的框。

默认情况下，其值为.track-container：

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

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

计算

'内联块'的基线是其最后一个线框的基线在正常流程中，除非它没有流入线框或如果它的'overflow'属性有一个除'visible'以外的计算值在哪种情况下，基线是底部边缘边缘。

下图说明了发生了什么（红线是基线）：

enter image description here

因此，你可以

更改元素的垂直对齐方式，例如到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;
}

将元素的overflow设置为与<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>不同的值，例如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;
}

确保元素没有流入线框，因此它们的基线将是它们的底边距边缘。也就是说，内容应为out of flow：

如果一个元素被浮动，那么它就被称为 out of flow 定位，或是根元素。如果元素被称为 in-flow 不是不流动的。

例如，您可以将元素的内容放在包装器中，并使用<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;
}

Answer 3

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

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

<强> jsFiddle example

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

Answer 4

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

http://jsfiddle.net/fC2nt/

Answer 5

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

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

5 个答案: