В этой статье будут продемонстрированы утилиты, которые можно использовать для управления размещением позиционированных элементов на веб-странице.
Утилиты Tailwind, используемые для управления размещением позиционированных элементов?
Утилита Tailwind CSS, которая специально занимается размещением позиционированных элементов как по горизонтальной, так и по вертикальной оси, называется « Топ | Правильно | Внизу | Левый ». Как и другие утилиты, он также предоставляет различные классы, которые могут устанавливать позиционированный элемент в разных местах. Некоторые из этих классов указаны ниже:
- вставка-{placementValue}
- начало-{placementValue}
- топ-{placementValue}
- конец-{placementValue}
- дно-{placementValue}
- влево-{placementValue}
- право-{placementValue}
Теперь давайте рассмотрим практический пример использования некоторых из этих классов для лучшего понимания.
Пример: размещение позиционированного элемента с помощью утилит Tailwind CSS
В этом примере описанная выше утилита будет использоваться для размещения позиционированного элемента в разных местах веб-страницы, как показано ниже:
< тело сорт '=' 'сетка-столбцы-3' >
< див сорт '=' 'относительный h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< див сорт '=' 'абсолютный левый-0 сверху-0 h-16 w-16 bg-blue-400 закругленный p-4' > Пункт 1 < / див >
< / див >
< див сорт '=' 'относительный h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< див сорт '=' 'абсолютная вставка-x-0 сверху-0 h-16 bg-blue-400 закругленная p-4' > Пункт 2 < / див >
< / див >
< див сорт '=' 'относительный h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< див сорт '=' 'абсолютная вставка-0 bg-blue-400 закругленная p-4' > Пункт 3 < / див >
< / див >
< див сорт '=' 'относительный h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< див сорт '=' 'абсолютная вставка-y-0 вправо-0 w-16 bg-blue-400 закругленная p-4' > Пункт 4 < / див >
< / див >
< див сорт '=' 'относительный h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch rounded' >
< див сорт '=' 'абсолютный низ-0 справа-0 h-16 w-16 bg-blue-400 закругленный p-4' > Пункт 5 < / див >
< / див >
< / тело >
Описание приведенного выше кода:
- Сначала создайте пять родительских « див » и применять различные CSS-классы Tailwind для установки относительного положения, высоты, ширины, фона, отступов, полей и т. д.
- Затем создайте вложенный « див ” внутри каждого родительского элемента “div”. Размещение будет выполнено для этого вложенного элемента «div».
- Затем примените CSS-классы попутного ветра « абсолютный », « час », « В », « бг », » п ', и ' округлый ” для стилизации вложенного “ див элемент.
- После этого, начиная с вложенных div с первого по пятый, назначьте новые классы « слева-0 сверху-0 », « вставка-х-0 », « вставка-0 », « вставка-y-0 вправо-0 ', и ' внизу-0 справа-0 ' соответственно.
- Эти классы устанавливают положение вложенных элементов div в верхнем левом углу, закрывают верхнюю позицию, закрывают все родительское пространство, закрывают правую сторону и закрывают левую нижнюю позицию соответственно.
После выполнения предварительный просмотр элементов div выглядит так:
Вывод показывает, что позиционированные элементы размещены в нужных позициях.
Заключение
« Топ | Правильно | Внизу | Левый Утилита Tailwind используется для управления размещением элементов на веб-странице. Он использует несколько классов для определения каждой позиции, а затем перемещает выбранный элемент в это место в соответствии с требованиями. Эти классы в основном размещают позиционированные элементы слева, справа, снизу и сверху. Они могут помочь охватить всю область, охватить определенные направления, например левое или верхнее, и так далее. В этой статье успешно объяснены утилиты, которые можно использовать для управления размещением позиционируемых элементов.