Блог

Главная - Вопросы по программированию - Как разделить текст на два равных столбца (вместо строк) справа от изображения с помощью flexbox?

Как разделить текст на два равных столбца (вместо строк) справа от изображения с помощью flexbox?

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

Я пытаюсь создать что-то похожее на этот макет в веб-интерфейсе Spotify с помощью flexbox:

Желаемый результат:
Желаемый результат.

Идея в том, что я хотел бы иметь два равных столбца с левой и правой секциями, где левая была бы изображением высотой 100%, а правая секция отображалась бы в двух равных столбцах. Проблема в том, что я не могу получить правильные две текстовые строки для отображения в виде столбцов, хотя я пытался использовать flex-direction: column и flex-wrap: wrap как для родительского, так и для гибкого элемента.

Вот мой код:

 **HTML**
  <footer>
    <div class="song-info">
        <img src="https://via.placeholder.com/56x56" alt="Song cover">
        <span class="song-name">Silent Song</span>
        <span class="artist-name">Daniel Rossen</span>
    </div>
    <div class="song-controls">Lorem Ipsum</div>
    <div class="song-volume">Lorem Ipsum</div>
</footer>
**CSS**
footer .song-info {
   max-width: 15%;
   display: flex;
}

footer .song-info span {
   display: flex;
   flex-direction: column;
   height: 50%;
   flex-wrap: wrap;

}

Я все еще получаю это:
Текущее состояние

Пока я хочу, чтобы .song-name и .song-volume были столбцами, как на начальном скриншоте.

Комментарии:

1. Скриншот вашего текущего состояния, похоже, соответствует вашему описанию наличия «правильного раздела… отображается в двух равных столбцах.» На скриншоте из Spotify нужный раздел организован в виде строк. Возможно ли, что вы перепутали свои определения здесь?

2. Перенесите интервалы вашей песни и исполнителя в новый элемент или используйте grid вместо flex (я предпочитаю grid, чтобы вам не приходилось добавлять дополнительные элементы)

3. Спасибо @arieljuod, попробую

Ответ №1:

Вы пытаетесь добавить display: flex и flex-direction:column к обоим промежуткам.

Добавьте контейнер вокруг него, код должен выглядеть следующим образом (я добавил немного симпатичного оформления):

 footer {
  background-color: black;
  width: 400px;
}

.song-info {
  display: flex;
  align-items: center;
  margin-top: 20px;
  font-family:helvetica;
  color: #fff;
  padding: 10px;
}

.song-info img {
  height: 60px;
  width: 60px;
  margin-right: 20px;
  object-fit: contain;
}

.artist-container {
  display: flex;
  flex-direction: column;
}

.song-name {
  font-weight: bold;
  margin-bottom: 5px;
}  
 <footer>
  <div class="song-info">
    <img src="https://images.genius.com/60712a7b6cbcc792502d877fb9a170c5.1000x1000x1.jpg" alt="Song cover">
    <div class="artist-container">
      <span class="song-name">EARFQUAKE</span>
      <span class="artist-name">Tyler, The Creator</span>
    </div>
  </div>
</footer>