Выравнивание изображений в форме цветка

У меня есть 4 значка, которые должны выровняться, как показано на рисунке ниже.

Я попытался сначала поместить их в <div> с классом, который контролирует позицию. Теперь, с моими знаниями, я бы дал каждому изображению абсолютную позицию, но это не сработает, потому что на каждом разрешении. мои изображения не вместе, а просто повсюду. Как я могу выровнять свои изображения, как «цветок», в отзывчивом режиме.

по отношению к 4 значкам я бы создал 3 гибких div с 3 столбцами и центрировал содержимое по вертикали.

c.m. 10.01.2023 08:45

Абсолютное позиционирование — в данном случае неправильное решение проблемы, так как оно будет хорошо смотреться только на одном экране.

AndreyDerets 10.01.2023 08:56

У меня похожая проблема

TheCodingTentacle 10.01.2023 09:03

Посмотрите на сетку CSS.

A Haworth 10.01.2023 09:16
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
5
54
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Нужно создать 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.

nanchalantflow 10.01.2023 09:54

Другие вопросы по теме