Как спозиционировать так карточки?
Что использовать grid или position absolute, а может быть можно как-то на флексах?
Если можно на гридах или флексах, то хотелось бы посмотреть на примеры кода
Спасибо)
Дополнительно:
Не видно зачем тут нужен абсолют.
Если можно на гридах или флексах
Можно.
Просто грид 2х2 и отступы. Или выравнивание внутри ячеек грида.
Или не 2х2, а 7х7.
Или аналогично флексами.
Что именно у вас не получилось?
Ответы:
Можно сделать float: left по классу,
дать одному блоку Id и проставить по margin.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #box { width: 600px; height: 400px; padding: 30px; background-color: pink } .block { height: 150px; width: 200px; background-color: green; float: left; } .stupid { margin-top: 30px; margin-left: 30px; } #low { margin-top: 60px } </style> </head> <body> <div id="box"> <div class="block"></div> <div class="block stupid"></div> <div class="block stupid"></div> <div class="block stupid" id="low"></div> </div> </body> </html> |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #box { width: 600px; height: 400px; padding: 30px; background-color: pink } .block { height: 150px; width: 200px; background-color: green; float: left; } .stupid { margin-top: 30px; margin-left: 30px; } #low { margin-top: 60px } </style> </head> <body> <div id="box"> <div class="block"></div> <div class="block stupid"></div> <div class="block stupid"></div> <div class="block stupid" id="low"></div> </div> </body> </html>
Зачем grid ? Зачем flex ?
Зачем position: absolute ?
И так нормально, если оно работает значит задача выполнена . - )
Жду критиков, и absolutnых чемпионов flexа. : - D
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для спозиционирования карточек на веб-странице можно использовать различные подходы в зависимости от требуемого дизайна и структуры страницы. Одним из наиболее распространенных методов является использование CSS свойства "display: flex" для создания гибкого и адаптивного макета.
Прежде всего, необходимо обернуть карточки в контейнер, для которого будет установлено свойство "display: flex". Например:
<div class="cards-container"> <div class="card">Карточка 1</div> <div class="card">Карточка 2</div> <div class="card">Карточка 3</div> </div>
Затем, в CSS файле можно определить стили для контейнера и карточек:
.cards-container { display: flex; justify-content: space-around; /* Выравнивание карточек по горизонтали */ flex-wrap: wrap; /* Перенос карточек на новую строку */ } .card { width: 200px; /* Ширина карточки */ margin: 10px; /* Внешние отступы */ }
Таким образом, карточки будут автоматически выстраиваться в ряды и колонки в зависимости от ширины экрана, что делает макет более адаптивным. Кроме того, можно использовать другие свойства flexbox, такие как "align-items", "align-content", "flex-direction" и другие, чтобы дополнительно настроить расположение карточек на странице.
Такой подход позволяет эффективно управлять расположением элементов на странице, обеспечивая гибкость и адаптивность дизайна.