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

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

这是一张图片:

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

我已经通过更改displayoverflow-textword-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

        【讨论】:

          猜你喜欢
          • 2018-06-05
          • 2014-05-10
          • 2012-08-01
          • 1970-01-01
          • 1970-01-01
          • 2021-12-24
          • 2020-01-08
          • 2012-06-05
          • 1970-01-01
          相关资源
          最近更新 更多