时间戳

首页 > 解决方案 > 艺术家 - 在移动视图媒体查询中突出显示 div

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

问题描述

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

这是一张图片：

音频播放器

我希望艺术家 - 标题（当该用户的屏幕更长时）仅在下面显示一行。

我已经通过更改display, overflow-text, word-break... 进行了测试</p>

这是我的代码：

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

标签： htmlcssmedia-querieshtml5-audio

解决方案

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

这是来自 MDN 的链接，其中包含有关块和内联布局流程的更多详细信息。

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

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

这个关于在同一行上进行 div 布局的问题是直接相关的。

此外，这个关于首选换行点的问题似乎与切线相关。

推荐阅读