如何解决我的内联块元素未正确排列
“ inline-block”的基线是正常流中其最后一个线框的基线,除非它没有流入流线框,或者如果其“overflow”属性的计算值不是“visible”,则在这种情况下,基线是下边距。
这是涉及inline-block
元素的常见问题。在这种情况下,该vertical-align
属性的默认值为baseline
。如果将值更改为top
,它将按预期运行。
.position-data {
vertical-align: top;
}
解决方法
内的所有元素.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。