Все элементы в .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>