.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 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;
}

07-28 02:43
查看更多