У меня есть 4 значка, которые должны выровняться, как показано на рисунке ниже.
Я попытался сначала поместить их в <div>
с классом, который контролирует позицию.
Теперь, с моими знаниями, я бы дал каждому изображению абсолютную позицию, но это не сработает, потому что на каждом разрешении. мои изображения не вместе, а просто повсюду.
Как я могу выровнять свои изображения, как «цветок», в отзывчивом режиме.
по отношению к 4 значкам я бы создал 3 гибких div с 3 столбцами и центрировал содержимое по вертикали.
Абсолютное позиционирование — в данном случае неправильное решение проблемы, так как оно будет хорошо смотреться только на одном экране.
У меня похожая проблема
Посмотрите на сетку CSS.
Нужно создать 3 столбца, завернутые в контейнер flex и выровненные по вертикали.
.wrapper {
display: flex;
}
.column {
align-items: center;
}
Я только что воссоздал то, что вы написали выше. Я могу помочь вам, когда вы указываете, что вам действительно нужно
.main {
display: flex;
height:100%;
align-items:center
}
.sec{
height: 50px;
width: 50px;
border:1px solid black
}
<div class = "main">
<div class = "sec"></div>
<div class = "sec2">
<div class = "sec"></div>
<div class = "sec"></div>
</div>
<div class = "sec"></div>
</div>
Для адаптивного макета вы можете использовать сетку CSS:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
width: 50vw;
aspect-ratio: 3 / 2;
}
.container>div {
aspect-ratio: 1 / 1;
border: 1px solid black;
box-sizing: border-box;
}
.container>div:nth-child(1) {
grid-column: 1;
grid-row: 2 / span 2;
}
.container>div:nth-child(2) {
grid-column: 2;
grid-row: 1 / span 2;
}
.container>div:nth-child(3) {
grid-column: 3;
grid-row: 2 / span 2;
}
.container>div:nth-child(4) {
grid-column: 2;
grid-row: 3 / span 2;
}
<div class = "container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Очевидно, установите ширину контейнера на то, что вам нужно.
Этот фрагмент устанавливает div по часовой стрелке, начиная с самого левого div.
Это действительно хороший отзывчивый. Спасибо м8.
Пожалуйста, прочтите Как задать вопрос и опубликуйте минимальный воспроизводимый пример