Тази статия ще демонстрира помощните програми, които могат да се използват за контролиране на разположението на позиционирани елементи върху уеб страницата.
Помощни програми Tailwind, използвани за контролиране на разположението на позиционирани елементи?
Помощната програма Tailwind CSS, която конкретно се занимава с поставянето на позиционирани елементи както в хоризонталната, така и във вертикалната ос, е „ Най-горе | Право | Отдолу | Наляво ”. Точно като други помощни програми, той също така предоставя различни класове, които могат да задават позиционирания елемент на различни места, някои от тези класове са посочени по-долу:
- inset-{placementValue}
- начало-{placementValue}
- топ-{placementValue}
- край-{placementValue}
- дъно-{placementValue}
- ляво-{placementValue}
- дясно-{placementValue}
Сега нека имаме практически пример за използване на някои от тези класове за по-добро разбиране.
Пример: Поставяне на позициониран елемент с помощта на Tailwind CSS Utilities
В този пример гореописаната помощна програма ще се използва за поставяне на позиционирания елемент на различни места върху уеб страница, както е показано по-долу:
< тяло клас = 'мрежа grid-cols-3' >
< див клас = 'относително h-32 w-32 bg-оранжево-200 p-4 m-4 текст център оправдаване разтягане закръглено' >
< див клас = 'абсолютно ляво-0 горе-0 h-16 w-16 bg-синьо-400 заоблено p-4' > Точка 1 < / див >
< / див >
< див клас = 'относително h-32 w-32 bg-оранжево-200 p-4 m-4 текст център оправдаване разтягане закръглено' >
< див клас = 'абсолютна вметка-x-0 top-0 h-16 bg-blue-400 закръглена p-4' > Точка 2 < / див >
< / див >
< див клас = 'относително h-32 w-32 bg-оранжево-200 p-4 m-4 текст център оправдаване разтягане закръглено' >
< див клас = 'абсолютна вметка-0 bg-синьо-400 закръглена p-4' > Точка 3 < / див >
< / див >
< див клас = 'относително h-32 w-32 bg-оранжево-200 p-4 m-4 текст център оправдаване разтягане закръглено' >
< див клас = 'абсолютна вметка-y-0 дясно-0 w-16 bg-синьо-400 заоблено p-4' > Точка 4 < / див >
< / див >
< див клас = 'относително h-32 w-32 bg-оранжево-200 p-4 m-4 текст център оправдаване разтягане закръглено' >
< див клас = 'абсолютно долу-0 дясно-0 h-16 w-16 bg-синьо-400 заоблено p-4' > Точка 5 < / див >
< / див >
< / тяло >
Описание на горния код:
- Първо, създайте пет родителски ' див ” елементи и приложете различни CSS класове на Tailwind, за да зададете относителната позиция, височина, ширина, фон, подложка, поле и т.н.
- След това създайте вложен „ див ” във всеки родителски „div”. Разположението ще бъде направено за този вложен „div“ елемент.
- След това приложете tailwind CSS класове на „ абсолютен ”, “ ч ”, “ в ”, “ бг ”, ” стр ', и ' заоблени ' за стилизиране на вложените ' див ” елемент.
- След това, започвайки от вложен div едно до пет, присвоете нови класове на „ ляво-0 горе-0 ”, “ вмъкване-x-0 ”, “ вмъкване-0 ”, “ вмъкване-y-0 дясно-0 ', и ' долу-0 дясно-0 ” съответно.
- Тези класове задават позицията на вложените div елементи в горния ляв ъгъл, покриват горната позиция, покриват цялото родителско пространство, покриват дясната страна и покриват съответно долната лява позиция.
След изпълнението визуализацията на div елементите изглежда така:
Резултатът показва, че позиционираните елементи са поставени на желаните позиции.
Заключение
„ Най-горе | Право | Отдолу | Наляво Помощната програма Tailwind се използва за контролиране на разположението на елементи върху уеб страницата. Той използва няколко класа за насочване към всяка позиция и след това премества избрания елемент на това място според изискванията. Тези класове основно поставят позиционираните елементи отляво, отдясно, отдолу и отгоре. Те могат да помогнат за покриване на цялата област, покриване на конкретни посоки като ляво или горе и т.н. Тази статия успешно обясни помощните програми, които могат да се използват за контролиране на разположението на позиционирани елементи.