Как можно реализовать такую верстку?
127
14 марта 2021, 12:50
Есть родительский flex, в нем картинки. При ресайзе дочерние элементы скакивают на другую строку. Можно ли как то сделать так, что бы дочерние элементы растягивались, и не оставляли пустого пространства при переносе картинок на другую строку.
<div class="main">
<div class="wrapper">
<div class="child">
<img src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg" alt="">
</div>
<div class="child">
<img src="https://bipbap.ru/wp-content/uploads/2017/10/0_a9e8c_fefaa1d2_XL-640x400.jpg" alt="">
</div>
<div class="child">
<img src="https://bipbap.ru/wp-content/uploads/2017/10/fon-1.jpg" alt="">
</div>
<div class="child">
<img src="https://bipbap.ru/wp-content/uploads/2017/10/fon-2.jpg" alt="">
</div>
</div>
</div>
.main {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
background: red;
}
img {
max-width: 100%;
max-height: 100%;
}
.child {
margin: 5px;
height: 100px;
}
https://jsfiddle.net/5h91qeay/
Answer 1
Простыми средствами CSS это не сделать, по крайней мере на момент написания этого ответа, Вот плагин который поможет вам это реализовать https://tympanus.net/codrops/2011/08/30/automatic-image-montage/ я писал примерно такой же для одного из проектов но увы его сейчас не достать
Answer 2
Это можно сделать обычным CSS, с помощью манипуляций с calc. Каждому блоку флексовому мы должны посчитать максимальную ширину, к примеру, тут, на самом большом разрешении экрана в первой линии первый элемент .post__intro.first занимает
2/3 max-width: calc((100% / 3) * 2 - 10px), также второй элемент на первой линии .post__intro занимает 1/3 max-width: calc((100% / 3) - 20px);
У второго элемента также присутствует margin-left: 30px, чтобы блоки вместились в одну линию мы дожны из максимальных ширин вычесть эти 30px. Я сделал так, что вычел у первого блока 10px, а у второго 20px, можно у каждого вычесть по 15px, или у одного 30px, а у другого не вычитать и всё также будет ровно.
Также для .post__intro я задал, что каждому :nth-child(3n+3) блоку 3, 6, 9, 12 и т.д. margin-left: 0, отступ слева нулевой.
Во всех других линиях (кроме первой) на максимальной ширине у первого блока отступ слева 0px, а у других два по 30px, всего получается 60px. Если вычесть у каждого блока по 20px, то мы вычтем эти 60px, а мы уже задали, что у каждого блока вычитаем по 20px. Также при сжатии блоки перестраиваются, но там логика такая же
@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Open+Sans:400,600,700|Raleway:400,900&display=swap');
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
}
img {
display: block;
max-width: 100%;
height: auto;
}
.container {
max-width: 1300px;
width: 100%;
margin: 0 auto;
padding: 0 10px;
}
.intro {
font-family: 'Open Sans', sans-serif;
}
.posts__intro {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
.post__intro {
margin-top: 30px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-direction: column;
position: relative;
margin-left: 30px;
max-width: calc((100% / 3) - 20px);
}
.post__intro.first {
text-align: center;
color: white;
margin-left: 0;
max-width: calc((100% / 3) * 2 - 10px);
min-height: 470px;
}
.post__intro:nth-child(3n+3) {
margin-left: 0;
}
.post__intro.first .post__intro__content {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 100%;
padding: 20px 0;
z-index: 0;
}
.post__intro.first .post__intro__title {
font-size: 34px;
line-height: 1.25;
margin-bottom: 10px;
padding: 0 15px;
}
.post__intro__date {
overflow-x: hidden;
}
.post__intro__section {
cursor: pointer;
position: relative;
display: inline-block;
overflow-x: hidden;
}
.post__intro__section::after {
width: 100%;
display: block;
content: '';
position: absolute;
height: 1px;
bottom: 0;
left: 0;
background-color: black;
transition: left 0.4s ease-in-out;
}
.post__intro.first .post__intro__section::after {
background-color: white;
}
.post__intro__section:hover::after {
left: 100%;
}
.post__intro.first .post__intro__img {
position: absolute;
height: 100%;
width: 100%;
}
.post__intro.first .post__intro__img img {
margin: 0 auto;
height: 100%;
width: 100%;
object-fit: cover;
}
.post__intro:not(.first) img {
box-shadow: 0 2px 5px 0 rgba(0,0,0,.3);
transition: filter .5s ease-in-out;
margin: 0 auto;
}
.post__intro:not(.first) img:hover {
filter: grayscale(100%)
}
.post__intro.first .post__intro__img:before {
position: absolute;
display: block;
content: '';
width: 100%;
height: 100%;
right: 0;
top: 0;
background-color: rgba(34, 41, 47, 0.9);
}
.post__intro.first .post__intro__text {
padding: 0 100px;
font-size: 18px;
}
.post__intro__info {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.post__intro.first .post__intro__info {
margin-bottom: 15px;
justify-content: center;
}
.post__intro__info span:not(:last-child)::after {
content: '·';
display: inline-block;
margin-left: 10px;
margin-right: 10px;
}
.post__intro:not(.first) .post__intro__title {
font-size: 20px;
margin-top: 20px;
margin-bottom: 5px;
}
.post__intro:not(.first) .post__intro__info {
margin-bottom: 10px;
}
@media (max-width: 960px) {
.post__intro.first {
max-width: 100%;
width: 100%;
}
.post__intro {
max-width: calc(50% - 10px);
}
.post__intro:nth-child(3n+3) {
margin-left: 0;
}
.post__intro:nth-child(2n+2) {
margin-left: 0;
}
.post__intro:nth-child(2n+3) {
margin-left: 20px;
}
}
@media (max-width: 650px) {
.post__intro, .post__intro:nth-child(3n+3) {
max-width: 100%;
margin-left: 0;
}
.post__intro:nth-child(2n+3) {
margin-left: 0;
}
}
@media (max-width: 550px) {
.post__intro.first .post__intro__text {
padding: 0 50px;
}
.post__intro.first .post__intro__title {
line-height: 1.125;
}
}
@media (max-width: 300px) {
.post__intro.first .post__intro__title {
font-size: 26px;
padding: 0;
}
.post__intro.first .post__intro__text {
padding: 0 15px;
font-size: 16px;
}
}<div class="intro">
<div class="container">
<div class="posts__intro">
<div class="post__intro first">
<div class="post__intro__img">
<img src="https://picsum.photos/750/750" alt="">
</div>
<div class="post__intro__content">
<div class="post__intro__title">
Zero BS CRM 3.0 Improves UI, Changes Database Structure, and Becomes More Extendable
</div>
<div class="post__intro__info">
<span class="post__intro__date">
7 декабря, 2019
</span>
<span class="post__intro__section">
Новости
</span>
</div>
<div class="post__intro__text">
The team behind Zero BS CRM launched version 3.0 of their WordPress plugin today. This is the first major release …
</div>
</div> <!-- .post__intro__content -->
</div> <!-- .post__intro.first -->
<div class="post__intro">
<div class="post__intro__img">
<img src="https://picsum.photos/750/750" alt="">
</div>
<div class="post__intro__content">
<div class="post__intro__title">
Gutenberg: One Year Later
</div>
<div class="post__intro__info">
<span class="post__intro__date">
7 декабря, 2019
</span>
<span class="post__intro__section">
Новости
</span>
</div>
<div class="post__intro__text">
As we quickly head into the final weeks of 2019, we also pass the first anniversary of WordPress 5.0 and, …
</div>
</div> <!-- .post__intro__content -->
</div> <!-- .post__intro -->
<div class="post__intro">
<div class="post__intro__img">
<img src="https://picsum.photos/750/750" alt="">
</div>
<div class="post__intro__content">
<div class="post__intro__title">
Gutenberg: One Year Later
</div>
<div class="post__intro__info">
<span class="post__intro__date">
7 декабря, 2019
</span>
<span class="post__intro__section">
Новости
</span>
</div>
<div class="post__intro__text">
As we quickly head into the final weeks of 2019, we also pass the first anniversary of WordPress 5.0 and, …
</div>
</div> <!-- .post__intro__content -->
</div> <!-- .post__intro -->
<div class="post__intro">
<div class="post__intro__img">
<img src="https://picsum.photos/750/750" alt="">
</div>
<div class="post__intro__content">
<div class="post__intro__title">
Gutenberg: One Year Later
</div>
<div class="post__intro__info">
<span class="post__intro__date">
7 декабря, 2019
</span>
<span class="post__intro__section">
Новости
</span>
</div>
<div class="post__intro__text">
As we quickly head into the final weeks of 2019, we also pass the first anniversary of WordPress 5.0 and, …
</div>
</div> <!-- .post__intro__content -->
</div> <!-- .post__intro -->
<div class="post__intro">
<div class="post__intro__img">
<img src="https://picsum.photos/750/750" alt="">
</div>
<div class="post__intro__content">
<div class="post__intro__title">
Gutenberg: One Year Later
</div>
<div class="post__intro__info">
<span class="post__intro__date">
7 декабря, 2019
</span>
<span class="post__intro__section">
Новости
</span>
</div>
<div class="post__intro__text">
As we quickly head into the final weeks of 2019, we also pass the first anniversary of WordPress 5.0 and, …
</div>
</div> <!-- .post__intro__content -->
</div> <!-- .post__intro -->
<div class="post__intro">
<div class="post__intro__img">
<img src="https://picsum.photos/750/750" alt="">
</div>
<div class="post__intro__content">
<div class="post__intro__title">
Gutenberg: One Year Later
</div>
<div class="post__intro__info">
<span class="post__intro__date">
7 декабря, 2019
</span>
<span class="post__intro__section">
Новости
</span>
</div>
<div class="post__intro__text">
As we quickly head into the final weeks of 2019, we also pass the first anniversary of WordPress 5.0 and, …
</div>
</div> <!-- .post__intro__content -->
</div> <!-- .post__intro -->
<div class="post__intro">
<div class="post__intro__img">
<img src="https://picsum.photos/750/750" alt="">
</div>
<div class="post__intro__content">
<div class="post__intro__title">
Gutenberg: One Year Later
</div>
<div class="post__intro__info">
<span class="post__intro__date">
7 декабря, 2019
</span>
<span class="post__intro__section">
Новости
</span>
</div>
<div class="post__intro__text">
As we quickly head into the final weeks of 2019, we also pass the first anniversary of WordPress 5.0 and, …
</div>
</div> <!-- .post__intro__content -->
</div> <!-- .post__intro -->
</div> <!-- .posts__intro -->
</div> <!-- .container -->
</div> <!-- .intro -->
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
-
21:56
Перевод документов на английский язык: Важность и ключевые аспекты
-
20:52
-
11:43
-
07:54
Какие существуют виды рекламных бордов и как выбрать подходящий?
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47528 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30479 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23602 visits
- Как через css изменить цвет png изображения? 10335 visits
- Blob video url download 9946 visits
- Php curl запрос через прокси с авторизацией 9198 visits
- Работа с captcha vk api 8078 visits
© "hostciti.net" 02.11.2024 | 01:26