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

2022-01-30 00:00:00 html css

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

All of the elements within .track-container should line up nice and in line, each side by side, constrained by the 200px height they've been given with no weird margins or padding. Instead, you have the strangeness that occurs in the aforementioned fiddle.

是什么导致 .album-artwork 和 .track-info 被推到页面的一半，我该如何解决?另外，我承认表格可能是处理整个设置的更好方法，但我想从上面的代码中找出问题，以便从这个错误中吸取教训.

What is causing .album-artwork and .track-info to get pushed halfway down the page, and how can I fix it? Also, I acknowledge that a table may be a better way of approaching this whole setup, but I want to figure out the problem from the code above so I can learn from this mistake. 

.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'和垂直对齐"属性

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

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

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

This is a common issue involving inline-block elements. In this case, the default value of the vertical-align property is baseline. If you change the value to top, it will behave as expected.

更新示例

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

相关文章