gpt4 book ai didi

html - 我的行内 block 元素没有正确排列

转载 作者:太空宇宙 更新时间:2023-11-03 17:41:33 25 4
gpt4 key购买 nike

.track-container 中的所有元素都应该排成一行,每个并排,受 200 像素高度的限制,没有奇怪的边距或填充。相反,您会遇到上述 fiddle 中出现的奇怪情况。

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

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,它将按预期运行。

Updated Example

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

关于html - 我的行内 block 元素没有正确排列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28996104/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com