我的内联块元素没有正确排列 [英] My inline-block elements are not lining up properly

查看:29
本文介绍了我的内联块元素没有正确排列的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

.track-container 中的所有元素都应该排列整齐,每一个并排,受 200 像素高度的约束,没有奇怪的边距或填充.相反,你有前面提到的小提琴中出现的奇怪之处.

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

.track-container {填充:0;宽度:600px;高度:200px;边框:1px纯黑色;列表样式类型:无;底边距:10px;}.位置数据{溢出:无;显示:内联块;宽度:12.5%;高度:200px;边距:0;填充:0;边框:1px纯黑色;}.current-position, .position-movement {高度:100px;宽度:100%;边距:0;填充:0;边框:1px纯黑色;}.专辑艺术品{显示:内联块;高度:200px;宽度:20%;边框:1px纯黑色;}.track-info {显示:内联块;左边距:10px;高度:200px;边框:1px纯黑色;}

<div class="位置数据"><div class="current-position">1</div><div class="position-movement">2</div>

<div class="album-artwork">fdasfdsa</div><div class="track-info">fdafdsa</div>

这是一个 JSFiddle.

解决方案

10.8 行高计算:'line-height'和垂直对齐"属性

'inline-block' 的基线是它在正常流中最后一个 line box 的基线,除非它没有 in-flow line box 或者它的 'overflow' 属性的计算值不是 'visible',在这种情况下,基线是底部边距边缘.

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

更新示例

.position-data {垂直对齐:顶部;}

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.

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>

Here's a 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.

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.

Updated Example

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

这篇关于我的内联块元素没有正确排列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆