Sa Tailwind CSS, ang mga pinalit na elemento ay ang mga elemento na ang nilalaman ay pinapalitan ng isang panlabas na mapagkukunan, tulad ng mga larawan at video. Minsan, nahaharap ang mga user sa isang hamon na iposisyon ang isang pinalitan na elemento sa loob ng container. Ito ay dahil ang mga elementong ito ay maaaring umapaw sa lalagyan kung ang kanilang sukat ay mas malaki kaysa sa magagamit na espasyo. Ang Tailwind CSS ay nagbibigay ng mga utility class para makontrol kung paano nakaposisyon at nakahanay ang content ng isang pinalitang elemento sa loob ng container.
Ang artikulong ito ay naglalarawan ng paraan upang iposisyon ang mga pinalit na elemento sa loob ng isang lalagyan sa Tailwind CSS.
Paano Iposisyon ang Mga Pinalitan na Elemento sa loob ng isang Container sa Tailwind?
Upang iposisyon ang mga pinalitang elemento sa loob ng isang lalagyan sa Tailwind, gumawa ng HTML program at gamitin ang “ bagay-
Syntax
< elemento klase = 'bagay-
Halimbawa
Sa halimbawang ito, gagawa kami ng lalagyan at gagamitin ang lahat ng ' bagay- ” (larawan) na mga elemento upang tukuyin ang kanilang pinalitan na posisyon sa loob ng lalagyan:
< katawan >
< div klase = 'bg-sky-300 grid grid-rows-3 grid-flow-col m-5 space-y-4 p-4 justify-between' >
< img klase = 'object-none object-left-top w-24 h-24 my-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klase = 'object-none object-left w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klase = 'object-none object-left-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klase = 'object-none object-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klase = 'object-none object-center w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klase = 'object-none object-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klase = 'object-none object-right-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klase = 'object-none object-right w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klase = 'object-none object-right-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
katawan >
Dito, sa parent
- “ bg-sky-300 Itinakda ng klase ng ” ang kulay ng background ng container sa kalangitan.
- “ grid ” klase ay nagbibigay-daan sa isang grid layout.
- “ grid-rows-3 ” itinatakda ng klase ang numero ng mga hilera sa grid sa 3.
- “ grid-flow-col Tinutukoy ng klase ang daloy ng mga grid item sa mga column.
- “ m-5 ” class ay nagdaragdag ng 5 unit ng margin sa paligid ng lalagyan.
- “ espasyo-y-4 ” class ay nagdaragdag ng vertical spacing ng 4 na unit sa pagitan ng mga child
na elemento sa loob ng container.
- “ p-4 ” class ay nagdaragdag ng 4 na yunit ng padding sa nilalaman sa loob ng lalagyan.
- “ bigyang-katwiran-sa pagitan ” inihanay ng klase ang mga elemento ng bata sa loob ng lalagyan at pantay na ipinamamahagi ang mga ito.
Sa mga elemento ng
:
- “ bagay-wala Ang klase ng ” ay hindi naglalapat ng anumang posisyon sa elemento at ipinapakita ang elemento sa default na posisyon nito sa lalagyan.
- “ bagay-kaliwa-itaas Ipinoposisyon ng klase ang
elemento sa kaliwang sulok sa itaas ng lalagyan nito.
- “ bagay-kaliwa ” class ay nakahanay sa elemento sa kaliwang gilid ng lalagyan at pinapanatili itong patayo sa gitna.
- “ bagay-kaliwa-ibaba Ipinoposisyon ng klase ang
na elemento sa ibabang kaliwang sulok ng lalagyan nito.
- “ object-top ” ipinoposisyon ng klase ang elemento sa tuktok na gilid ng lalagyan nito at itinatakda ito nang pahalang na nakasentro.
- “ object-center ” ipinoposisyon ng klase ang elemento sa gitna ng lalagyan at pinapanatili itong pahalang at patayo na nakasentro.
- “ bagay-ibaba ” ipinoposisyon ng klase ang elemento sa ilalim na gilid ng lalagyan nito at pinapanatili itong nakasentro nang pahalang.
- “ object-right-top Ipinoposisyon ng klase ang
na elemento sa kanang sulok sa itaas ng container.
- “ object-right ” ipinoposisyon ng klase ang elemento sa kanang gilid ng lalagyan nito at pinapanatili itong patayo sa gitna.
- “ object-right-bottom ” ipinoposisyon ng klase ang elemento sa kanang sulok sa ibaba ng lalagyan nito.
Output
Sa web page sa itaas, mapapansing matagumpay na naiposisyon ang lahat ng nilalaman ng pinalitan na elemento.
Konklusyon
Upang iposisyon ang mga pinalit na elemento sa loob ng isang lalagyan sa Tailwind, ang ' bagay-
” Ang mga utility ay ginagamit kasama ng mga gustong elemento, tulad ng mga imahe. Kailangang tukuyin ng mga user ang partikular na posisyon o gilid i.e. kaliwa, kanan, o gitna sa utility na 'object- ' para iposisyon ang mga pinalit na elemento. Ang artikulong ito ay naglalarawan ng paraan upang iposisyon ang mga pinalit na elemento sa loob ng isang lalagyan sa Tailwind CSS.