#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>
Комментарии:
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. да, это удаляет. Вы можете добавить заполнение снизу значением высоты расширенного содержимого