艺术家 - 在移动视图媒体查询中突出显示 div答案

【问题标题】：Artist - title stick out div in mobile view media queries艺术家 - 在移动视图媒体查询中突出显示 div
【发布时间】：2020-02-15 11:15:34
【问题描述】：

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

【问题讨论】：

标签： html css media-queries html5-audio

【解决方案1】：

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

.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>

【讨论】：

【解决方案2】：

将 div 更改为使用 display: inline-block; 而不是 inline grid 将更改 div 布局行为。

Here is a link from MDN with more details on block and inline layout flow.

现在 inline-grid 每个 div 占据一整行，无论其内容的大小如何，更改为 inline-block 将使每个 div 大致占据其内容所需的大小，导致它们显示在如果它们适合，则在同一行，如下面的代码 sn-p 所示：

  
  .titrage, .now, .artist, .separator, .title { display: inline-block; }

  

  <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>

This question about making divs layout on the same line is directly related.

Also this question about preferred line break points seems tangentially related。

【讨论】：

【解决方案3】：

感谢您的回答；）

我终于找到了解决办法。我只是在“你在听”下面放了艺术家 - 标题一行。

在 .titrage 上显示：块。 On .now 显示：已修复。在新的 div .now（包括 .artist、.separator 和 .title）上显示：flex

它对我有用：p

【讨论】：