html - 艺术家 - 标题在移动 View 媒体查询中突出 div

Question

我有一个带有艺术家和标题的动态音频播放器。它工作正常，但在移动 View 中，艺术家和标题突出了我的 div。

这是一张图片:

我希望艺术家 - 标题(当用户的屏幕变长时)仅在下方显示一行。

我已经通过更改display、overflow-text、word-break…进行了测试

这是我的代码:

@media screen and (orientation: portrait) and (max-width: 750px) {
  .titrage { display: inline-grid; }
  }

<div class='titrage'>
  <div class='now'>Your are listening <img class='cover' src="cover.png" alt='audio-cover'> : </div>
  <div class='artist'>Loading </div>
   <div class='separator'>-</div>
   <div class='title'>...</div>
</div>

Answer 1

也许使用 flex？如果没有媒体查询，这应该可以正常工作。或者也可以使用媒体查询。

.titrage {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.pad {
  padding: 10px;
}

<div class='titrage'>
  <div class='now'>
    <img class='cover' src="https://via.placeholder.com/75" alt='audio-cover'>
  </div>
  <div class="pad">
    <span>You are Listening :</span>
    <span class='artist'>Bee Gees </span>
    <span class='separator'>-</span>
    <span class='title'>Stayin' Alive (1977)</span>
  </div>
</div>