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

问题描述

.track-container 中的所有元素都应并排排列，每个并排，受限于200像素的高度。奇怪的边距或填充。相反，你有在上述小提琴发生的奇怪。

导致 .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;宽度：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>  

$ b

这是 JSFiddle 。

解决方案

10.8线高度计算：'line-height'和'vertical-align'属性

'inline-block'的基线是除非它没有流入线框或者其overflow属性具有除visible之外的计算值，在这种情况下，基线是底边距边缘。

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

更新示例

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

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

这篇关于我的inline-block元素没有正确排队的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！