Блог

Главная - Вопросы по программированию - Расширение гибких элементов на всю ширину

Расширение гибких элементов на всю ширину

#html #css #flexbox #grid-layout

#HTML #css #flexbox #сетка-макет

Вопрос:

Я пытаюсь создать пользовательский макет расширения в стиле iTunes. Однако я сталкиваюсь с несколькими проблемами. Изначально я предполагал использовать flex-box для этого. Но, похоже, я не совсем могу сделать то, что я хочу сделать.

Я прикрепил изображение того, что я пытаюсь создать. По сути, сетка из кликабельных эскизов с расширяющимся содержимым во всю ширину. И аспект полной ширины — это то, с чем я борюсь. Нужно ли мне устанавливать явную ширину для расширяющегося содержимого или будет ли возможно, чтобы содержимое сгибалось на всю ширину?

Что я пытаюсь создать:

Что я пытаюсь создать

Я прикрепил очень простой codepen, который демонстрирует проблему, с которой я столкнулся. Если бы первое изображение было «расширенным», я бы хотел, чтобы оно было во всю ширину.

 .album-container {
  display: flex;
  flex-direction: row;
}

.album {
  width: 50%;
}

img {
  width: 100%;
}

.expanded-content {
  background: #212121;
  color: #FFFFFF;
}  
 <div class="album-container">
  <album class='album'>
    <img alt="album-artwork" src="https://img.discogs.com/grVTPVqiRonKp5ly_ey-moBmO0c=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-11826116-1524151283-4015.jpeg.jpg">
    <div class="expanded-content">
      <div>Whatever People Say I Am, That’s What I’m Not</div>
      <div>Arctic Monkeys</div>
    </div>
  </album>
    <album class='album'>
    <img alt="album-artwork" src="https://img.discogs.com/grVTPVqiRonKp5ly_ey-moBmO0c=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-11826116-1524151283-4015.jpeg.jpg">
  </album>
</div>

https://codepen.io/jakefauvel/pen/QoKdJP

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

1. Изображения отображаемой страницы не очень полезны для тех, кто пытается помочь вам в отладке вашего кода. Размещение соответствующих CSS и HTML увеличит вероятность получения на ваш вопрос положительного ответа и полезных ответов. idownvotedbecau.se/nocode

2. Не могли бы вы добавить свой код, чтобы мы могли вам помочь? В двух словах я бы сказал, что здесь будут работать как Grid, так и Flexbox, что касается Flexbox, вы просто должны использовать его вне основного родительского flexbox (где у вас есть обложки альбомов в качестве дочерних элементов), что касается grid, вам нужно использовать grid-column стиль для этого всплывающего окна

3. @vicodin Спасибо за ваш ответ. Я прикрепил очень простой codepen, который, надеюсь, демонстрирует мою проблему. Я попытался установить width: calc(100vw — myMargin), который работает для расширения содержимого первого элемента. Но второй, очевидно, переполнит страницу. Что также кажется хакерским.

4. Добро пожаловать? Спасибо за улучшение вашего вопроса. Я удалил свой downvote.

Ответ №1:

Если вы хотите сохранить именно эту структуру HTML и иметь только один всплывающий доступ за раз, этот подход может вам помочь (см. фрагмент)

Но я думаю, что было бы лучше и чище реструктурировать HTML-код, например, .expanded-content удалить из .album-container и изменить его содержимое с помощью JavaScript, если это возможно. 

 .album-container {
  display: flex;
  flex-direction: row;
  position: relative;
}

.album {
  width: 50%;
}

img {
  width: 100%;
}

.expanded-content {
  background: #212121;
  color: #FFFFFF;
  
  position: absolute;
  left: 0;
  width: 100%;
}  
 <div class="album-container">
  <album class='album'>
    <img alt="album-artwork" src="https://img.discogs.com/grVTPVqiRonKp5ly_ey-moBmO0c=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-11826116-1524151283-4015.jpeg.jpg">
    
  </album>
    <album class='album'>
    <img alt="album-artwork" src="https://img.discogs.com/grVTPVqiRonKp5ly_ey-moBmO0c=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-11826116-1524151283-4015.jpeg.jpg">
<div class="expanded-content">
      <div>Whatever People Say I Am, That’s What I’m Not</div>
      <div>Arctic Monkeys</div>
    </div>
  </album>
</div>

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

1. А, ура! Весьма смущен тем, насколько простым было решение. Code pen был базовым примером, на самом деле это будет компонент Vue, поэтому все эти данные будут динамическими. Я буду зацикливать и монтировать «альбомы» на основе данных, поступающих из серверной части. Основная причина, по которой я включил расширяющийся контент в альбом, заключалась в том, что он напрямую связан с этим конкретным альбомом, я пытался сохранить все это достаточно автономным для отдельного альбома.

2. Что ж, тогда это решение должно сработать для вас 🙂 Добро пожаловать

3. Сегодня вечером я еще раз взглянул на это. Абсолютная позиция отлично подходит для получения содержимого, расширяющегося на всю ширину, однако теперь я заметил, что контейнер альбома теперь не учитывает высоту расширенного содержимого. Это то, что мне придется решать с помощью JS и установки высоты родительского элемента, или есть исправление CSS, чтобы родительский элемент по-прежнему учитывал высоту дочернего элемента?

4. Я прав, думая, что абсолютное позиционирование удаляет его из потока документов?

5. да, это удаляет. Вы можете добавить заполнение снизу значением высоты расширенного содержимого