Как сверстать блоки которые визуально находятся на разных уровнях?
Работаю с такими интрументами, как Tailwind CSS и Antd. Подскажите куда копать, что почитать? как такие штуки делают? есть ли примеры ?
Дополнительно:
Эм, у вас же просто отступ сверху у первого блока и все...
Ответы:
Привет, скорее всего ты рановато полез в Tailwind раз не понимаешь как такие штуки делаются.
Это обычная grid сетка, у которой например рядов 5 рядов, и 2 столбика.
Ты должен сделать примерно так:
<div className='grid grid-col-[1fr_1fr] grid-row-[repeat(5,_1fr)]'> <div className='row-start-2 row-end-4'> </div> // и таким образом двигать нужные тебе блоки, если что ссылка на доку ниже <div/> |
<div className='grid grid-col-[1fr_1fr] grid-row-[repeat(5,_1fr)]'> <div className='row-start-2 row-end-4'> </div> // и таким образом двигать нужные тебе блоки, если что ссылка на доку ниже <div/>
documentation - https://tailwindcss.com/docs/grid-row
- // за качество кода не ручаюсь, писал быстро и на телефоне, мог ошибаться, главное принцип.
- а если это будет массив из таких однотипных карточек, и я просто [{},{},{}].map(item=>...) т.е. я не знаю точное количество элементов, но логика их отображения не меняется. Как это правильно можно написать, что отображение начинается в правой колонке, затем следующий элемент в левой колонке(причем левая колонка с отступом сверху), затем снова в правой и тд
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сверстать блоки, которые визуально находятся на разных уровнях, можно воспользоваться различными методами CSS. Вот несколько способов, как это можно сделать:
1. Использование свойства margin:
```html
<div class="parent"> <div class="child1"></div> <div class="child2"></div> </div>
.parent { background-color: #f2f2f2; } .child1 { background-color: #007bff; margin-bottom: 20px; } .child2 { background-color: #28a745; }
```
2. Использование свойства padding:
```html
<div class="parent"> <div class="child1"></div> <div class="child2"></div> </div>
.parent { background-color: #f2f2f2; } .child1 { background-color: #007bff; padding-bottom: 20px; } .child2 { background-color: #28a745; }
```
3. Использование позиционирования:
```html
<div class="parent"> <div class="child1"></div> <div class="child2"></div> </div>
.parent { background-color: #f2f2f2; position: relative; } .child1 { background-color: #007bff; top: 0; left: 0; } .child2 { background-color: #28a745; position: absolute; top: 50px; left: 0; }
```
Выберите подход, который лучше всего подходит для вашего дизайна и требований. Не стесняйтесь экспериментировать с различными способами и настройками, чтобы достичь нужного вам эффекта.