CSS ciągnij w prawo
Przykład 01:
W naszym pierwszym przykładzie użyjemy właściwości Float, aby pociągnąć różne elementy po prawej, lewej i nigdzie. Porównujemy również te właściwości ze sobą, aby lepiej zrozumieć. Rozpoczynamy nasz pierwszy przykład ze standardowym formatem dokumentu HTML używanego do tworzenia dowolnych stron internetowych opartych na HTML. Znacznik główny zawiera tytuł strony HTML, która ma zostać utworzona za pomocą wewnętrznego znacznika „tytułu”. Następnie mamy styl i główny tag nadwozia. Przed przyjrzeniem się stylizacji CSS strony HTML musimy spojrzeć na ciało, które zostanie stylizowane. Ciało tej strony HTML zawiera proste nagłówek rozmiaru 1 i główny znacznik „div” do utworzenia sekcji na stronie HTML. Ten znacznik „div” jest określony w klasie „A” dla różnicowania podczas stylizacji. W tej sekcji mamy 3 kolejne elementy „div”, które są tutaj używane.
Wszystkie trzy sekcje Div są określone z trzema różnymi klasami-pływakowo-lewicowymi, prawymi pływakami i float-none. Po zamknięciu tych trzech sekcji „Div” zamykamy również główną sekcję „Div”. Po zamknięciu głównej sekcji Div następuje znacznik „ciała” tego HTML. Ciało i jego elementy są teraz kompletne. Aby niektóre sekcje ciągną się w prawo lub w lewo, musimy je odpowiednio stylizować. Zatem w ramach stylu kodu HTML używamy klasy „A” dla pierwszej sekcji „Div”, aby ustawić ją względem strony HTML za pośrednictwem właściwości „pozycji”.
Również ta główna sekcja ma 400 pikseli szerokości i wysokości z solidną granicą 3 pikseli w brązowym kolorze. Następnie używamy klas pływowych, prawej i float-none dla wewnętrznych sekcji „div”, aby je odpowiednio stylizować. Właściwość Float jest używana do pierwszej sekcji Div Wewnętrznej, aby pociągnąć ją do dokładnego prawa strony HTML. Ponadto w tej sekcji zawiera szerokość 100 pikseli, wysokość 120 pikseli i kropkowaną granicę 3px w kolorze litego niebieskiego. Drugi wewnętrzny „div” jest ustawiony na względne i ciągnięte na lewo od strony HTML za pomocą właściwości pływakowej. Ma szerokość 200px, wysokość 120px, z 3px stałą zieloną granicą. Ostatnia sekcja wewnętrzna zawiera pozycję bezwzględną bez określonej właściwości ciągnięcia. Ma również 3px stałą brązową granicę, szerokość 100px i wysokość 100px. Ten kod jest gotowy do użycia w przeglądarce Chrome za pośrednictwem kodu Visual Studio, aby zobaczyć stylistykę.
Po wykonaniu go w przeglądarce Chrome, otrzymujemy następujące dane wyjściowe. Główna sekcja Div jest wyświetlana z solidną czerwoną granicą, a jej pozycja jest względna strony HTML. Podczas gdy odcinek Div z kropkowanej granicy jest ciągnięty w prawo za pomocą właściwości „pływak” w CSS tego kodu, jak pokazano na obrazie. Sekcja div z zielonymi kolorami jest wyciągana w lewo za pomocą właściwości „pływak” i jest w stosunku do strony HTML. Pozycja brązowej sekcji „div” jest określona jako względna i jest wyświetlana na obrazie.
Przykład 02:
Zacznijmy od kolejnego przykładu użycia właściwości pływakowej CSS do pociągnięcia elementów HTML w prawej lub lewej stronie. Ten kod zaczyna się od tego samego znacznika HTML po znaczniku „głowicy”, który zawiera tytuł tej strony HTML, i.mi. „CSS ciągnij w prawo”. Do dodania tytułu dla tej strony używamy tagu tytułu. Musimy najpierw przyjrzeć się sekcji ciała naszego skryptu HTML. Dodajemy nagłówek do ciała strony HTML za pomocą znacznika nagłówka „H1”, i.mi. duży rozmiar nagłówka.
Następnie wypróbujemy znacznik „sekcji” w tym kodzie HTML. Niniejszy znacznik jest używany do utworzenia sekcji w korpusie strony HTML. W tej sekcji używamy trzech nowych elementów „Div” i jednego elementu akapitowego. Oba pierwsze tagi Div wykorzystują tę samą klasę „lewicową”, podczas gdy trzeci znacznik DIV używa innej klasy „prawy-pull” w swoim otwierającym znaczniku. Pierwsze dwa tagi Div zawierają w nich proste teksty, podczas gdy trzeci znacznik Div zawiera znacznik obrazu „IMG”, aby dodać obraz w tej sekcji Div. Źródłem tego obrazu jest nasz system lokalny i jest w formacie „JPG”. Akapit zawiera również prostą linię tekstu.
Po zakończeniu wszystkich 3 tagów Div i znacznika akapitu nasz znacznik sekcji zakończył się tutaj z zamknięciem. Ciało tej strony HTML jest już zakończone. Zamknij znacznik „ciała”. W „stylu” tego kodu HTML do stylizacji określamy element „sekcja”, aby stylizować jego wewnętrzne elementy połączone jednocześnie. Ten rozmiar rozdziału jest zdefiniowany przez format „graniczny” i zawiera wokół niej kropkowaną 5-pikselową granicę. Szerokość tego rozdziału wynosi 50 procent, gdy jest ona wyciągana w lewo za pomocą właściwości „pływak”. Elementy „Div” są stylizowane z marginesem 5px, szerokości 200px i wysokością 150px dla wszystkich. Elementy DIV zawierające klasę „lewej części” są wyświetlane w lewej pozycji z tłem herbaty.
Podczas gdy elementy div z klasą „prawicowe” są ciągnięte w prawo za pomocą właściwości „pływak”, a tło jest ustawione na bliski kolor niebieski. Nasz kod jest zakończony i jest gotowy do użycia w kodzie Visual Studio za pośrednictwem menu „Uruchom” po opcji „Rozpocznij debugowanie”.
Wyjście tego kodu pokazuje prosty nagłówek i nowa kropkowana sekcja wygenerowana na stronie HTML. Ta sekcja zawiera trzy różne sekcje DIV w niej. Pierwsze dwie sekcje DIV są wyciągane w lewo z kolorem herbaty różowego tła. Podczas gdy trzecia sekcja Div zawiera obraz pociągnięty w prawo od tej strony HTML.
Wniosek
Omówiliśmy potrzebę i użycie wyciągania elementów na stronie HTML w naszym akapicie wprowadzającym. Ten artykuł pokazuje bardzo wyraźną demonstrację wyciągania elementów CSS w lewo, w prawo lub brak za pośrednictwem właściwości CSS „Float”. Jest używany we wszystkich przykładach do ciągnięcia tych elementów w określonym kierunku, używając klas w sekcjach DIV. Wszystkie przykłady omówione w tym artykule są dość proste i łatwe do zrozumienia dla każdego początkującego i ekspertów CSS.