W Tailwind CSS zastępowane elementy to elementy, których treść jest zastępowana przez zewnętrzny zasób, taki jak obrazy i filmy. Czasami użytkownicy stają przed wyzwaniem umieszczenia wymienionego elementu w kontenerze. Dzieje się tak, ponieważ te elementy mogą przepełnić kontener, jeśli ich rozmiar jest większy niż dostępna przestrzeń. Tailwind CSS zapewnia klasy narzędzi do kontrolowania sposobu umieszczania i wyrównywania zawartości zastępowanego elementu w kontenerze.
W tym artykule zilustrujemy metodę umieszczania zastąpionych elementów w kontenerze w CSS Tailwind.
Jak umieścić wymienione elementy w kontenerze w Tailwind?
Aby umieścić zastąpione elementy w kontenerze w Tailwind, utwórz program HTML i użyj „ obiekt-
Składnia
< element klasa = 'obiekt-
Przykład
W tym przykładzie stworzymy kontener i użyjemy wszystkich „ obiekt-
< ciało >
< dz klasa = „bg-sky-300 grid grid-rows-3 grid-flow-col m-5 space-y-4 p-4 justify-między” >
< img klasa = „obiekt-brak obiektu-lewo-góra w-24 h-24 my-4” źródło = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasa = „obiekt-żaden obiekt-po lewej stronie w-24 h-24” źródło = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasa = „obiekt-brak obiektu-lewy-dół w-24 h-24” źródło = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasa = 'object-none obiekt-top w-24 h-24' źródło = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasa = „obiekt-brak obiektu-centrum w-24 h-24” źródło = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasa = „obiekt-brak obiektu-dół w-24 h-24” źródło = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasa = „obiekt-brak obiektu-prawy-górny w-24 h-24” źródło = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasa = „obiekt-brak obiektu-prawo w-24 h-24” źródło = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img klasa = „obiekt-brak obiektu-prawy-dół w-24 h-24” źródło = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
dz >
ciało >
Tutaj, w elemencie nadrzędnym
- “ bg-sky-300 ” class ustawia kolor tła kontenera na niebo.
- “ siatka ” umożliwia układ siatki.
- “ rzędy siatki-3 ” class ustawia liczbę wierszy w siatce na 3.
- “ siatka-przepływ-kol ” definiuje przepływ elementów siatki w kolumnach.
- “ m-5 ” klasa dodaje 5 jednostek marginesu wokół kontenera.
- “ spacja-y-4 ” dodaje pionowy odstęp 4 jednostek między elementami podrzędnymi
w kontenerze.
- “ p-4 ” dodaje 4 jednostki wypełnienia do zawartości wewnątrz kontenera.
- “ uzasadnić-pomiędzy ” wyrównuje elementy podrzędne w kontenerze i równomiernie je rozdziela.
W elementach
:
- “ obiekt-brak ” nie stosuje żadnej pozycji do elementu i wyświetla element w jego domyślnej pozycji w kontenerze.
- “ obiekt-lewo-góra ” umieszcza element
w lewym górnym rogu kontenera.
- “ obiekt po lewej stronie ” wyrównuje element do lewej krawędzi kontenera i utrzymuje go w pionie.
- “ obiekt-lewo-dół ” umieszcza element
w lewym dolnym rogu kontenera.
- “ szczyt obiektu ” umieszcza element na górnej krawędzi jego kontenera i ustawia go poziomo na środku.
- “ obiekt-centrum ” umieszcza element na środku kontenera i utrzymuje go wyśrodkowany w pionie iw poziomie.
- “ dno obiektu ” umieszcza element na dolnej krawędzi jego kontenera i utrzymuje go w poziomie na środku.
- “ obiekt-prawy-górny ” umieszcza element
w prawym górnym rogu kontenera.
- “ prawo przedmiotowe ” umieszcza element przy prawej krawędzi jego kontenera i utrzymuje go w pionie wyśrodkowany.
- “ obiekt-prawy-dół ” umieszcza element w prawym dolnym rogu kontenera.
Wyjście
Na powyższej stronie internetowej można zauważyć, że cała zawartość zastąpionego elementu została pomyślnie pozycjonowana.
Wniosek
Aby umieścić wymienione elementy w kontenerze w Tailwind, przycisk „ obiekt-
Narzędzia ” są używane z żądanymi elementami, takimi jak obrazy. Użytkownicy muszą zdefiniować określoną pozycję lub stronę, tj. lewą, prawą lub środkową w narzędziu „obiekt- ”, aby umieścić zastąpione elementy. W tym artykule zilustrowano metodę pozycjonowania zastąpionych elementów w kontenerze w CSS Tailwind.