Artist - название в выпадающем списке в мобильных медиа-запросах - PullRequest
Новая
       23

Artist - название в выпадающем списке в мобильных медиа-запросах

0 голосов
/ 18 октября 2019

У меня динамический аудиоплеер с исполнителем и названием. Это работает нормально, но на мобильном экране, художник и название выделяют мой div.

Вот изображение:

audio-player

Я хотел бы исполнителя - название (когда экран этого пользователя длиннее), отобразите только строку ниже.

Я уже проверял, изменив 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>

Ответы [ 3 ]

0 голосов
/ 18 октября 2019

Может быть, вы используете 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>
0 голосов
/ 25 октября 2019

Спасибо, что ответили;)

Я наконец нашел решение. Я просто поместил Artist - заголовок в строку ниже «Вы слушаете».

На .titrage a display: block. На. Сейчас дисплей: исправлено. И на новом div .now (включая .artist, .separator и .title) показ: flex

Это работает для меня: p

0 голосов
/ 18 октября 2019

Изменение div для использования display: 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 на одной строке имеет прямое отношение .

Также этот вопросо предпочтительных точках разрыва линии кажется тангенциально связанным .

...