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

我有一个带有艺术家和标题的动态音频播放器。
它工作正常，但在移动视图下，艺术家和标题突出显示了我的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>

最佳答案

也许使用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>

关于html - 艺术家-标题在移动 View 媒体查询中突出显示div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58451162/