我的内联块元素没有正确排列。

Question

我的内联块元素没有正确排列。

所有元素.track-container应该很好地排成一行，每条线并排，受到200 px高度的限制，没有奇怪的边距或填充。相反，你有发生在上述小提琴中的奇怪之处。

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

Answer 1

10.8线高计算：“线高”和“垂直对齐”属性“内联块”的基线是其在正常流中的最后一行框的基线，除非它没有流内行框，或者它的“溢出”属性具有“可见”以外的计算值，在这种情况下，基线是底部边距。这是一个常见的问题inline-block元素。在这种情况下，vertical-align财产baseline..如果将值更改为top，它的行为将与预期的一样。更新示例.position-data&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;vertical-align:&nbsp;top;}

Answer 2

内部元素.track-container是内联级同一个盒子线路箱.因此，它们的垂直对齐由vertical-align财产：此属性影响由内联级别元素生成的框的行框内的垂直定位。默认情况下，其值为baseline:将方框的基线与父框的基线对齐。如果方框没有基线，请将底部边缘与父基准对齐。在这种情况下，它们都有基线，这些基线是根据“内联块”的基线是其在正常流中的最后一行框的基线，除非它没有流内行框，或者它的“溢出”属性具有“可见”以外的计算值，在这种情况下，基线是底部边距。因此，你可以更改元素的垂直对齐方式，例如top,&nbsp;middle或bottom.track-container&nbsp;>&nbsp;*&nbsp;{&nbsp;vertical-align:&nbsp;middle;&nbsp;}.track-container {&nbsp; padding: 0;&nbsp; width: 600px;&nbsp; height: 200px;&nbsp; border: 1px solid black;&nbsp; list-style-type: none;&nbsp; margin-bottom: 10px;}.position-data {&nbsp; overflow: none;&nbsp; display: inline-block;&nbsp; width: 12.5%;&nbsp; height: 200px;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; border: 1px solid black;}.current-position,.position-movement {&nbsp; height: 100px;&nbsp; width: 100%;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; border: 1px solid black;}.album-artwork {&nbsp; display: inline-block;&nbsp; height: 200px;&nbsp; width: 20%;&nbsp; border: 1px solid black;}.track-info {&nbsp; display: inline-block;&nbsp; padding-left: 10px;&nbsp; height: 200px;&nbsp; border: 1px solid black;}.track-container > * {&nbsp; vertical-align: middle;}<div class="track-container">&nbsp; <div class="position-data">&nbsp; &nbsp; <div class="current-position">1</div>&nbsp; &nbsp; <div class="position-movement">2</div>&nbsp; </div>&nbsp; <div class="album-artwork">fdasfdsa</div>&nbsp; <div class="track-info">fdafdsa</div></div>设置overflow的元素visible，G.hidden或auto因此，他们的基线将是他们的底部边缘。.track-container&nbsp;>&nbsp;*&nbsp;{&nbsp;overflow:&nbsp;hidden;&nbsp;}.track-container {&nbsp; padding: 0;&nbsp; width: 600px;&nbsp; height: 200px;&nbsp; border: 1px solid black;&nbsp; list-style-type: none;&nbsp; margin-bottom: 10px;}.position-data {&nbsp; overflow: none;&nbsp; display: inline-block;&nbsp; width: 12.5%;&nbsp; height: 200px;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; border: 1px solid black;}.current-position,.position-movement {&nbsp; height: 100px;&nbsp; width: 100%;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; border: 1px solid black;}.album-artwork {&nbsp; display: inline-block;&nbsp; height: 200px;&nbsp; width: 20%;&nbsp; border: 1px solid black;}.track-info {&nbsp; display: inline-block;&nbsp; padding-left: 10px;&nbsp; height: 200px;&nbsp; border: 1px solid black;}.track-container > * {&nbsp; overflow: hidden;}<div class="track-container">&nbsp; <div class="position-data">&nbsp; &nbsp; <div class="current-position">1</div>&nbsp; &nbsp; <div class="position-movement">2</div>&nbsp; </div>&nbsp; <div class="album-artwork">fdasfdsa</div>&nbsp; <div class="track-info">fdafdsa</div></div>确保元素没有在流线框，这样他们的基线将是他们的底部边缘。也就是说，内容应该是出流:一个元素被称为出流如果它被浮动，则绝对定位，或者是根元素。一个元素被称为流中如果它不是流出来的话。因此，例如，您可以将元素的内容放在包装器中，并使用float: left:.track-container&nbsp;>&nbsp;*&nbsp;>&nbsp;.wrapper&nbsp;{&nbsp;float:&nbsp;left;&nbsp;}.track-container {&nbsp; padding: 0;&nbsp; width: 600px;&nbsp; height: 200px;&nbsp; border: 1px solid black;&nbsp; list-style-type: none;&nbsp; margin-bottom: 10px;}.position-data {&nbsp; overflow: none;&nbsp; display: inline-block;&nbsp; width: 12.5%;&nbsp; height: 200px;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; border: 1px solid black;}.current-position,.position-movement {&nbsp; height: 100px;&nbsp; width: 100%;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; border: 1px solid black;}.album-artwork {&nbsp; display: inline-block;&nbsp; height: 200px;&nbsp; width: 20%;&nbsp; border: 1px solid black;}.track-info {&nbsp; display: inline-block;&nbsp; padding-left: 10px;&nbsp; height: 200px;&nbsp; border: 1px solid black;}.track-container > * > .wrapper {&nbsp; float: left;}<div class="track-container">&nbsp; <div class="position-data">&nbsp; &nbsp; <div class="current-position wrapper">1</div>&nbsp; &nbsp; <div class="position-movement wrapper">2</div>&nbsp; </div>&nbsp; <div class="album-artwork">&nbsp; &nbsp; <span class="wrapper">fdasfdsa</span>&nbsp; </div>&nbsp; <div class="track-info">&nbsp; &nbsp; <span class="wrapper">fdafdsa</span>&nbsp; </div></div>

Answer 3

您需要将垂直对齐：顶部添加到这两个元素中：.album-artwork,&nbsp;.track-info&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;vertical-align:top;}jsFiddle示例默认的垂直对齐是基线，但您正在寻找顶部。