我的内联块元素没有正确排列
我的内联块元素没有正确排列
提问于 2013-10-15 02:09:09
.track-container中的所有元素都应该排列整齐，每个元素并排排列，并受到200px高度的限制，没有奇怪的边距或填充。相反，你有前面提到的小提琴中出现的奇怪之处。
是什么导致.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。
回答 2
Stack Overflow用户
发布于 2013-10-15 02:24:28
或者您可以将float:left;设置为3个元素。
Stack Overflow用户
发布于 2013-10-15 03:00:04
确保要对齐的所有元素的行高比也是相同的。如果你混合使用DIV，P，H1-5，DT，DD，INPUT，BUTTON标签，这也会导致垂直对齐不正常，这取决于你已经在其他地方定义的东西。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19366401
复制相关文章
相似问题