我的内联块元素排列不正确
在.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 。
10.8线高计算：“线高”和“垂直alignment”属性
“内联块”的基线是正常stream程中最后一个线框的基线，除非其中没有stream入线框或“溢出”属性的计算值不是“可见”，否则这种情况下的基线是底部边缘。
这是一个涉及inline-block元素的常见问题。 在这种情况下， vertical-align属性的默认值是baseline 。 如果您将值更改为top ，它将按预期行事。
更新示例
.position-data { vertical-align: top; }
.track-container中的元素是同一个.track-container的内联 框 。
因此，它们的垂直alignment由vertical-align属性指定：
此属性影响由行内级元素生成的框的行框内的垂直定位。
默认情况下，它的值是baseline ：
将框的基线与父框的基线alignment。 如果该框没有基线，请将底部边缘与父母的基线alignment。
在这种情况下，他们都有基线，这是根据计算
“内联块”的基线是正常stream程中最后一个线框的基线，除非其中没有stream入线框或“溢出”属性的计算值不是“可见”，否则这种情况下的基线是底部边缘。
以下图片说明发生了什么（红线是基线）：
所以，你可以
-
更改元素的垂直alignment，例如，更改为
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>
您需要为这两个元素添加vertical-align：top：
.album-artwork, .track-info { vertical-align:top; }
jsFiddle的例子
默认的垂直alignment是基线，但是您正在寻找顶部。
或者你可以设置float:left; 到3个元素。
确保你试图alignment的所有元素的行高比都是一样的。 如果您使用DIV，P，H1-5，DT，DD，INPUT，BUTTON标签的混合，这也会导致垂直alignment的不规则性，这取决于您在别处已经定义的内容。
