Tailwind CSS для Flexbox и Grid Layout
Tailwind CSS предоставляет мощные утилитарные классы для управления макетами, особенно Flexbox и Grid.
Утилитарные классы Flexbox и Grid позволяют эффективно создавать адаптивные, гибкие макеты без написания пользовательского CSS.
Философия Tailwind CSS — управлять макетом с помощью низкоуровневых классов, ориентированных на утилиты, гибко комбинируя классы для разных дизайнерских задач.
1. Макет Flexbox
Flexbox — это режим компоновки, который помогает разработчикам создавать одномерные (горизонтальные или вертикальные) макеты.
Tailwind CSS предоставляет несколько кратких утилитарных классов для управления всеми аспектами макета Flexbox, включая направление, выравнивание и гибкость.
Настройка Flex-контейнера
Чтобы создать раскладку Flexbox, сначала нужно сделать элемент flex-контейнером.
Пример
<div class="flex">
<div>Элемент 1</div>
<div>Элемент 2</div>
<div>Элемент 3</div>
</div>
<div>Элемент 1</div>
<div>Элемент 2</div>
<div>Элемент 3</div>
</div>
Попробуйте сами »
`flex` устанавливает для элемента display в `flex`, активируя раскладку Flexbox.
Утилитарные классы для начального размера flex-элементов и соответствующие им CSS-свойства:
| Имя класса Tailwind | CSS-свойство и значение | Описание |
|---|---|---|
basis-0 | flex-basis:0px; | Устанавливает базовый размер flex-элемента в 0px. |
basis-1 | flex-basis:0.25rem; | Устанавливает базовый размер flex-элемента в 4px. |
basis-2 | flex-basis:0.5rem; | Устанавливает базовый размер flex-элемента в 8px. |
basis-3 | flex-basis:0.75rem; | Устанавливает базовый размер flex-элемента в 12px. |
basis-4 | flex-basis:1rem; | Устанавливает базовый размер flex-элемента в 16px. |
basis-5 | flex-basis:1.25rem; | Устанавливает базовый размер flex-элемента равным 20px. |
basis-6 | flex-basis:1.5rem; | Устанавливает базовый размер flex-элемента равным 24px. |
basis-7 | flex-basis:1.75rem; | Устанавливает базовый размер flex-элемента равным 28px. |
basis-8 | flex-basis:2rem; | Устанавливает базовый размер flex-элемента равным 32px. |
basis-9 | flex-basis:2.25rem; | Устанавливает базовый размер flex-элемента равным 36px. |
basis-10 | flex-basis:2.5rem; | Устанавливает базовый размер flex-элемента равным 40px. |
basis-11 | flex-basis:2.75rem; | Устанавливает базовый размер flex-элемента равным 44px. |
basis-12 | flex-basis:3rem; | Устанавливает базовый размер flex-элемента равным 48px. |
basis-14 | flex-basis:3.5rem; | Устанавливает базовый размер flex-элемента равным 56px. |
basis-16 | flex-basis:4rem; | Устанавливает базовый размер flex-элемента равным 64px. |
basis-20 | flex-basis:5rem; | Устанавливает базовый размер flex-элемента равным 80px. |
basis-24 | flex-basis:6rem; | Устанавливает базовый размер flex-элемента равным 96px. |
basis-28 | flex-basis:7rem; | Устанавливает базовый размер flex-элемента в 112px. |
basis-32 | flex-basis:8rem; | Устанавливает базовый размер flex-элемента в 128px. |
basis-36 | flex-basis:9rem; | Устанавливает базовый размер flex-элемента в 144px. |
basis-40 | flex-basis:10rem; | Устанавливает базовый размер flex-элемента в 160px. |
basis-44 | flex-basis:11rem; | Устанавливает базовый размер flex-элемента в 176px. |
basis-48 | flex-basis:12rem; | Устанавливает базовый размер flex-элемента в 192px. |
basis-52 | flex-basis:13rem; | Устанавливает базовый размер flex-элемента в 208px. |
basis-56 | flex-basis:14rem; | Устанавливает базовый размер flex-элемента в 224px. |
basis-60 | flex-basis:15rem; | Устанавливает базовый размер flex-элемента в 240px. |
basis-64 | flex-basis:16rem; | Устанавливает базовый размер flex-элемента в 256px. |
basis-72 | flex-basis:18rem; | Устанавливает базовый размер flex-элемента в 288px. |
basis-80 | flex-basis:20rem; | Устанавливает базовый размер flex-элемента в 320px. |
basis-96 | flex-basis:24rem; | Устанавливает базовый размер flex-элемента равным 384px. |
basis-auto | flex-basis:auto; | Устанавливает базовый размер flex-элемента равным auto. |
basis-px | flex-basis:1px; | Устанавливает базовый размер flex-элемента равным 1px. |
basis-0.5 | flex-basis:0.125rem; | Устанавливает базовый размер flex-элемента равным 2px. |
basis-1.5 | flex-basis:0.375rem; | Устанавливает базовый размер flex-элемента равным 6px. |
basis-2.5 | flex-basis:0.625rem; | Устанавливает базовый размер flex-элемента равным 10px. |
basis-3.5 | flex-basis:0.875rem; | Устанавливает базовый размер flex-элемента равным 14px. |
basis-1/2 | flex-basis:50%; | Устанавливает базовый размер flex-элемента равным половине ширины контейнера. |
basis-1/3 | flex-basis:33.333333%; | Устанавливает базовый размер flex-элемента равным одной трети ширины контейнера. |
basis-2/3 | flex-basis:66.666667%; | Устанавливает базовый размер flex-элемента равным двум третям ширины контейнера. |
basis-1/4 | flex-basis:25%; | Устанавливает базовый размер flex-элемента равным одной четвёртой ширины контейнера. |
basis-2/4 | flex-basis:50%; | Устанавливает базовый размер flex-элемента равным половине ширины контейнера. |
basis-3/4 | flex-basis:75%; | Устанавливает базовый размер flex-элемента равным трём четвертям ширины контейнера. |
basis-1/5 | flex-basis:20%; | Устанавливает базовый размер flex-элемента равным одной пятой ширины контейнера. |
basis-2/5 | flex-basis:40%; | Устанавливает базовый размер flex-элемента равным двум пятым ширины контейнера. |
basis-3/5 | flex-basis:60%; | Устанавливает базовый размер flex-элемента равным трём пятым ширины контейнера. |
basis-4/5 | flex-basis:80%; | Устанавливает базовый размер flex-элемента равным четырём пятым ширины контейнера. |
basis-1/6 | flex-basis:16.666667%; | Устанавливает базовый размер flex-элемента равным одной шестой ширины контейнера. |
basis-2/6 | flex-basis:33.333333%; | Устанавливает базовый размер flex-элемента равным двум шестым ширины контейнера. |
basis-3/6 | flex-basis:50%; | Устанавливает базовый размер flex-элемента равным двум третям ширины контейнера. |
basis-4/6 | flex-basis:66.666667%; | Устанавливает базовый размер flex-элемента равным четырём шестым ширины контейнера. |
basis-5/6 | flex-basis:83.333333%; | Устанавливает базовый размер flex-элемента равным пяти шестым ширины контейнера. |
basis-1/12 | flex-basis:8.333333%; | Устанавливает базовый размер flex-элемента равным 8.33%. |
basis-2/12 | flex-basis:16.666667%; | Устанавливает базовый размер flex-элемента равным 16.67%. |
basis-3/12 | flex-basis:25%; | Устанавливает базовый размер flex-элемента равным 25%. |
basis-4/12 | flex-basis:33.333333%; | Устанавливает базовый размер flex-элемента равным 33.33%. |
basis-5/12 | flex-basis:41.666667%; | Устанавливает базовый размер flex-элемента равным 41.67%. |
basis-6/12 | flex-basis:50%; | Устанавливает базовый размер flex-элемента равным 50%. |
basis-7/12 | flex-basis:58.333333%; | Устанавливает базовый размер flex-элемента равным 58.33%. |
basis-8/12 | flex-basis:66.666667%; | Устанавливает базовый размер flex-элемента равным 66.67%. |
basis-9/12 | flex-basis:75%; | Устанавливает базовый размер flex-элемента равным 75%. |
basis-10/12 | flex-basis:83.333333%; | Устанавливает базовый размер flex-элемента равным 83.33%. |
basis-11/12 | flex-basis:91.666667%; | Устанавливает базовый размер flex-элемента равным 91.67%. |
basis-full | flex-basis:100%; | Устанавливает базовый размер flex-элемента равным 100%. |
Пример
<div class="flex flex-row">
<div class="basis-1/4">01</div>
<div class="basis-1/4">02</div>
<div class="basis-1/2">03</div>
</div>
<div class="basis-1/4">01</div>
<div class="basis-1/4">02</div>
<div class="basis-1/2">03</div>
</div>
Попробуйте сами »
Направление Flex
`flex-direction` управляет направлением главной оси (т.е. направлением, в котором элементы располагаются внутри flex-контейнера).
Tailwind предоставляет следующие утилитарные классы для установки направления:
flex-rowЗначение по умолчанию: элементы располагаются горизонтально слева направо.flex-row-reverseЭлементы располагаются горизонтально справа налево.flex-colЭлементы располагаются вертикально сверху вниз.flex-col-reverseЭлементы располагаются вертикально снизу вверх.
Пример
<div class="flex flex-row ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div class="flex flex-row-reverse ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div class="flex flex-col ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div class="flex flex-row-reverse ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div class="flex flex-col ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
Попробуйте сами »
Перенос Flex (Flex Wrap)
По умолчанию элементы в Flexbox-контейнере располагаются в одну строку.
Если вы хотите, чтобы они переносились, можно использовать утилитарный класс `flex-wrap`.
flex-wrapПозволяет элементам переноситься.flex-nowrapЗапрещает перенос элементов.flex-wrap-reverseОбратный перенос.
Пример
<div class="flex flex-nowrap">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div class="flex flex-wrap">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div class="flex flex-wrap-reverse">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div class="flex flex-wrap">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div class="flex flex-wrap-reverse">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
Попробуйте сами »
Гибкость flex-элементов
Flexbox позволяет размерам элементов увеличиваться и уменьшаться в зависимости от доступного пространства.
Tailwind CSS предоставляет следующие утилитарные классы для управления гибкостью:
| Имя класса Tailwind | CSS-свойство и значение | Описание |
|---|---|---|
flex-1 | flex: 1 1 0%; | Предоставляет flex-элементам одинаковые возможности flex-grow и flex-shrink при базовом размере 0%, обычно используется для создания flex-макетов с одинаковой шириной или высотой. |
flex-auto | flex: 1 1 auto; | Предоставляет flex-элементам автоматический базовый размер и одинаковые возможности flex-grow и flex-shrink, обычно используется, чтобы flex-элементы заполняли дополнительное пространство. |
flex-initial | flex: 0 1 auto; | Задает flex-элементам автоматический базовый размер, не увеличивается, но может уменьшаться; используется для сохранения естественного размера элемента, если места недостаточно. |
flex-none | flex: none; | Запрещает flex-элементам увеличиваться или уменьшаться, сохраняя их базовый размер. Часто используется для фиксации размера элементов. |
Пример
<div class="flex">
<div class="flex-none w-14 ...">
01
</div>
<div class="flex-initial w-64 ...">
02
</div>
<div class="flex-initial w-32 ...">
03
</div>
</div>
<div class="flex">
<div class="flex-none w-14 ...">
01
</div>
<div class="flex-1 w-64 ...">
02
</div>
<div class="flex-1 w-32 ...">
03
</div>
</div>
<div class="flex-none w-14 ...">
01
</div>
<div class="flex-initial w-64 ...">
02
</div>
<div class="flex-initial w-32 ...">
03
</div>
</div>
<div class="flex">
<div class="flex-none w-14 ...">
01
</div>
<div class="flex-1 w-64 ...">
02
</div>
<div class="flex-1 w-32 ...">
03
</div>
</div>
Попробуйте сами »
Свойство flex-grow
Ниже представлены утилитарные классы, управляющие свойством flex-grow flex-элементов, вместе с соответствующими CSS-свойствами:
| Имя класса Tailwind | CSS-свойства и значения | Описание |
|---|---|---|
grow | flex-grow: 1; | Позволяет flex-элементу увеличиваться, чтобы заполнить дополнительное пространство, с коэффициентом увеличения 1. |
grow-0 | flex-grow: 0; | Запрещает flex-элементу увеличиваться, чтобы заполнить дополнительное пространство, с коэффициентом увеличения 0. |
Пример
<div class="flex ...">
<div class="flex-none w-14 h-14 ...">
01
</div>
<div class="grow h-14 ...">
02
</div>
<div class="flex-none w-14 h-14 ...">
03
</div>
</div>
<div class="flex-none w-14 h-14 ...">
01
</div>
<div class="grow h-14 ...">
02
</div>
<div class="flex-none w-14 h-14 ...">
03
</div>
</div>
Попробуйте сами »
Свойство flex-shrink
Ниже приведены утилитарные классы, управляющие свойством flex-shrink флекс-элементов, вместе с соответствующими CSS-свойствами:
| Имя класса Tailwind | CSS-свойства и значения | Описание |
|---|---|---|
shrink | flex-shrink: 1; | Позволяет флекс-элементу сжиматься при необходимости, чтобы поместиться в флекс-контейнер, с коэффициентом сжатия 1. |
shrink-0 | flex-shrink: 0; | Не позволяет флекс-элементу сжиматься при необходимости, чтобы поместиться в флекс-контейнер, с коэффициентом сжатия 0. |
Пример
<div class="flex ...">
<div class="flex-none w-14 h-14 ...">
01
</div>
<div class="shrink w-64 h-14 ...">
02
</div>
<div class="flex-none w-14 h-14 ...">
03
</div>
</div>
<div class="flex-none w-14 h-14 ...">
01
</div>
<div class="shrink w-64 h-14 ...">
02
</div>
<div class="flex-none w-14 h-14 ...">
03
</div>
</div>
Попробуйте сами »
Упорядочивание
Ниже приведены утилитарные классы, используемые для управления порядком флекс-элементов или grid-элементов, вместе с соответствующими CSS-свойствами:
| Имя класса Tailwind | CSS-свойства и значения | Описание |
|---|---|---|
order-1 | order: 1; | Устанавливает порядок флекс-элемента или grid-элемента равным 1. |
order-2 | order: 2; | Устанавливает порядок флекс-элемента или grid-элемента равным 2. |
order-3 | order: 3; | Устанавливает порядок флекс-элемента или grid-элемента равным 3. |
order-4 | order: 4; | Устанавливает порядок flex-элемента или grid-элемента равным 4. |
order-5 | order: 5; | Устанавливает порядок flex-элемента или grid-элемента равным 5. |
order-6 | order: 6; | Устанавливает порядок flex-элемента или grid-элемента равным 6. |
order-7 | order: 7; | Устанавливает порядок flex-элемента или grid-элемента равным 7. |
order-8 | order: 8; | Устанавливает порядок flex-элемента или grid-элемента равным 8. |
order-9 | order: 9; | Устанавливает порядок flex-элемента или grid-элемента равным 9. |
order-10 | order: 10; | Устанавливает порядок flex-элемента или grid-элемента равным 10. |
order-11 | order: 11; | Устанавливает порядок flex-элемента или grid-элемента равным 11. |
order-12 | order: 12; | Устанавливает порядок flex-элемента или grid-элемента равным 12. |
order-first | order: -9999; | Устанавливает порядок flex-элемента или grid-элемента на первое место. |
order-last | order: 9999; | Устанавливает порядок flex-элемента или grid-элемента на последнее место. |
order-none | order: 0; | Устанавливает порядок flex-элемента или grid-элемента по умолчанию, то есть не изменяет его порядок. |
Пример
<div class="flex justify-between ...">
<div class="order-last">01</div>
<div>02</div>
<div>03</div>
</div>
<div class="order-last">01</div>
<div>02</div>
<div>03</div>
</div>
Попробуйте сами »
Макет Grid
Grid — это ещё одна модель макета, которая позволяет точно позиционировать элементы в строках и столбцах и легко создавать сложные макеты.
Tailwind CSS предоставляет мощные утилитарные классы для работы с grid-макетами.
Ниже приведены утилитарные классы в Tailwind CSS для указания количества столбцов в grid-макете вместе с соответствующими CSS-свойствами:
| Имя класса Tailwind | CSS-свойства и значения | Описание |
|---|---|---|
grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)); | Создаёт grid-макет с 1 столбцом. |
grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)); | Создаёт grid-макет с 2 столбцами. |
grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)); | Создаёт grid-макет с 3 столбцами. |
grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)); | Создаёт grid-макет с 4 столбцами. |
grid-cols-5 | grid-template-columns: repeat(5, minmax(0, 1fr)); | Создаёт grid-макет с 5 столбцами. |
grid-cols-6 | grid-template-columns: repeat(6, minmax(0, 1fr)); | Создаёт grid-макет с 6 столбцами. |
grid-cols-7 | grid-template-columns: repeat(7, minmax(0, 1fr)); | Создаёт макет сетки с 7 колонками. |
grid-cols-8 | grid-template-columns: repeat(8, minmax(0, 1fr)); | Создаёт макет сетки с 8 колонками. |
grid-cols-9 | grid-template-columns: repeat(9, minmax(0, 1fr)); | Создаёт макет сетки с 9 колонками. |
grid-cols-10 | grid-template-columns: repeat(10, minmax(0, 1fr)); | Создаёт макет сетки с 10 колонками. |
grid-cols-11 | grid-template-columns: repeat(11, minmax(0, 1fr)); | Создаёт макет сетки с 11 колонками. |
grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr)); | Создаёт макет сетки с 12 колонками. |
grid-cols-none | grid-template-columns: none; | Не создаёт колонки сетки; дочерние элементы не будут использовать макет сетки. |
grid-cols-subgrid | grid-template-columns: subgrid; | Использует макет subgrid; дочерние элементы унаследуют определения колонок родительской сетки. |
Пример
<div class="grid grid-cols-4 gap-4">
<div>01</div>
<!-- ... -->
<div>09</div>
</div>
<div>01</div>
<!-- ... -->
<div>09</div>
</div>
Попробуйте сами »
grid: Включает макет сетки.grid-cols-{n}: Задаёт количество колонок сетки.gap-{size}: Задаёт промежуток между колонками и строками.
Строки и столбцы сетки
Черезgrid-template-columnsиgrid-template-rowsУправляйте шириной и высотой столбцов и строк. Tailwind предоставляет следующие утилитарные классы для управления:
grid-cols-{n}: Задаёт количество столбцов сетки (например,grid-cols-3указывает на три столбца).grid-rows-{n}: Задаёт количество строк сетки (например,grid-rows-2указывает на две строки).col-span-{n}: Задаёт, сколько столбцов занимает элемент.row-span-{n}: Задаёт, сколько строк занимает элемент.
Пример
<div class="grid grid-cols-4 gap-4">
<div>01</div>
<!-- ... -->
<div>05</div>
<div class="grid grid-cols-subgrid gap-4 col-span-3">
<div class="col-start-2">06</div>
</div>
</div>
<div>01</div>
<!-- ... -->
<div>05</div>
<div class="grid grid-cols-subgrid gap-4 col-span-3">
<div class="col-start-2">06</div>
</div>
</div>
Попробуйте сами »
Пример
<div class="grid grid-cols-3 gap-4">
<div class="...">01</div>
<div class="...">02</div>
<div class="...">03</div>
<div class="col-span-2 ...">04</div>
<div class="...">05</div>
<div class="...">06</div>
<div class="col-span-2 ...">07</div>
</div>
<div class="...">01</div>
<div class="...">02</div>
<div class="...">03</div>
<div class="col-span-2 ...">04</div>
<div class="...">05</div>
<div class="...">06</div>
<div class="col-span-2 ...">07</div>
</div>
Попробуйте сами »
Пример
<div class="grid grid-rows-3 grid-flow-col gap-4">
<div class="row-span-3 ...">01</div>
<div class="col-span-2 ...">02</div>
<div class="row-span-2 col-span-2 ...">03</div>
</div>
<div class="row-span-3 ...">01</div>
<div class="col-span-2 ...">02</div>
<div class="row-span-2 col-span-2 ...">03</div>
</div>
Попробуйте сами »
Позиционирование элементов сетки
grid-column и grid-row управляют положением каждого элемента в сетке.
Это можно указать с помощью следующих утилитарных классов:
col-start-{n}: Задает начало элемента в столбце n.col-end-{n}: Задает конец элемента в столбце n.row-start-{n}: Задает начало элемента в строке n.row-end-{n}: Задает конец элемента в строке n.
Пример
<div class="grid grid-cols-6 gap-4">
<div class="col-start-2 col-span-4 ...">01</div>
<div class="col-start-1 col-end-3 ...">02</div>
<div class="col-end-7 col-span-2 ...">03</div>
<div class="col-start-1 col-end-7 ...">04</div>
</div>
<div class="col-start-2 col-span-4 ...">01</div>
<div class="col-start-1 col-end-3 ...">02</div>
<div class="col-end-7 col-span-2 ...">03</div>
<div class="col-start-1 col-end-7 ...">04</div>
</div>
Попробуйте сами »
Пример
<div class="grid grid-rows-3 grid-flow-col gap-4">
<div class="row-start-2 row-span-2 ...">01</div>
<div class="row-end-3 row-span-2 ...">02</div>
<div class="row-start-1 row-end-4 ...">03</div>
</div>
<div class="row-start-2 row-span-2 ...">01</div>
<div class="row-end-3 row-span-2 ...">02</div>
<div class="row-start-1 row-end-4 ...">03</div>
</div>
Попробуйте сами »
Выравнивание и распределение
Подобно Flexbox, Grid также предоставляет параметры выравнивания и распределения.
Свойство justify-content используется для выравнивания дочерних элементов внутри контейнера вдоль главной оси (горизонтального направления).
| Имя класса Tailwind | CSS-свойства и значения | Описание |
|---|---|---|
justify-normal | justify-content: normal; | Использует выравнивание по умолчанию, обычно эквивалентноstart。 |
justify-start | justify-content: flex-start; | Перемещает все дочерние элементы в начало контейнера. При горизонтальном макете дочерние элементы выравниваются по левому краю. |
justify-end | justify-content: flex-end; | Перемещает все дочерние элементы в конец контейнера. При горизонтальном макете дочерние элементы выравниваются по правому краю. |
justify-center | justify-content: center; | Центрирует все дочерние элементы. |
justify-between | justify-content: space-between; | Распределяет пространство равномерно между дочерними элементами, не оставляя пространства по краям. |
justify-around | justify-content: space-around; | Распределяет пространство равномерно между дочерними элементами, оставляя по краям пространство половинного размера. |
justify-evenly | justify-content: space-evenly; | Распределяет пространство полностью равномерно между дочерними элементами, включая пространство по краям. |
justify-stretch | justify-content: stretch; | Растягивает дочерние элементы, чтобы заполнить контейнер, при этом каждый дочерний элемент занимает одинаковое пространство. |
Пример
<div class="flex justify-start ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<div>01</div>
<div>02</div>
<div>03</div>
</div>
Попробуйте сами »
Другие настройки выравнивания:
justify-items: Управляет выравниванием содержимого ячейки сетки.justify-self: Управляет выравниванием отдельного элемента сетки.align-items: Управляет вертикальным выравниванием ячеек сетки.align-self: Управляет вертикальным выравниванием отдельного элемента сетки.
Пример
<div class="grid justify-items-start ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</div>
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</div>
Попробуйте сами »