W tym artykule zademonstrowano prawidłowe wyrównanie elementu div z praktycznymi przykładami użycia CSS.
- Jak wyrównać div do prawej za pomocą CSS?
- Korzystanie z właściwości „float”.
- Korzystanie z „właściwej” właściwości
- Korzystanie z elastycznego układu
- Korzystanie z układu siatki
Jak wyrównać div do prawej za pomocą CSS?
Deweloper może odpowiednio wyrównać każdy element div lub obraz w taki sposób, aby witryna była bardziej atrakcyjna. Ze względu na swoją dużą elastyczność elementy div mogą być wykorzystywane na stronie internetowej na kilka sposobów, takich jak definiowanie sekcji strony, tworzenie kolumn i zawijanie zestawów powiązanych treści.
Postępuj zgodnie z poniższymi metodami, aby wyrównać div do prawej:
Metoda 1: Korzystanie z właściwości „float”.
W pliku HTML utwórz element div i przypisz mu klasę „ wyrównaj do prawej ”. Ta klasa i div są używane w całym artykule.
< dz klasa = „wyrównaj do prawej” >
< P > To jest jakaś treść. < / P >
< / dz >
Teraz wybierz tę klasę div „ wyrównaj do prawej ” i przypisz właściwości CSS. Te właściwości są wykorzystywane do lepszej wizualizacji:
.wyrównaj do prawej {
pływak: prawy;
wypełnienie: 10px;
tło- kolor : gorący róż;
}
W powyższym kodzie „ platforma ” jest ustawiona po prawej stronie. Unosi się lub przesuwa element div we właściwym kierunku na stronie internetowej. Właściwości dopełnienia i koloru tła są ustawione na „ 10 piks ' I ' gorący róż ” odpowiednio.
Po skompilowaniu powyższego fragmentu kodu strona wygląda następująco:
Powyższe dane wyjściowe potwierdzają, że div porusza się we właściwym kierunku.
Metoda 2: Używanie „właściwej” właściwości
W CSS wybierz klasę div i ustaw „ Prawidłowy ” na 0. Zapewnia, że odległość zaznaczonego elementu div od prawej strony jest równa zeru. Następnie ustaw „ pozycja ”właściwość do” absolutny ”, aby naprawić pozycję div. Na koniec zastosuj kilka właściwości stylizacyjnych, aby uzyskać lepszą wizualizację:
.wyrównaj do prawej{
Prawidłowy: 0 ;
pozycja: absolutna;
wypełnienie: 10px;
tło- kolor : średnifiolet;
}
Strona po wykonaniu kodu wygląda tak:
Dane wyjściowe pokazują, że element div jest teraz wyrównany do prawej.
Metoda 3: Korzystanie z elastycznego układu
Flex jest najbardziej wydajną metodą i zachowuje układ podczas zmiany rozmiaru okna. Div można wyrównać do prawej za pomocą CSS „ Elastyczny układ ' nieruchomości. Układ Flex zawiera wiele właściwości do różnych celów.
W pliku HTML utwórz nadrzędny div, a wewnątrz niego dwa divy rodzeństwa. Przypisz także każdemu div unikalną klasę:
< dz klasa = „wyrównaj do prawej” >< dz klasa = „wyrównane do lewej” >
< P > To coś więcej treść .< / P >
< / dz >
< dz klasa = „wyrównane do prawej” >
< h1 >Pozdrowienia z Linuxhint < / h1 >
< / dz >
< / dz >
Teraz wewnątrz „
wyświetlacz: elastyczny;
uzasadniać- treść : przestrzeń pomiędzy;
}
wyrównane do prawej {
align-self: flex-end;
wypełnienie: 10px;
tło- kolor : średnifiolet;
}
W powyższym kodzie
- Przypisz „ przewód ” i „odstęp między” wartościami do „ wyświetlacz ' I ' uzasadnij treść ”, odpowiednio. Te właściwości sprawiają, że div jest elastyczny i ustawia równe odstępy między potomnymi divami.
- „ wyrównać siebie ” właściwość jest ustawiona na „ elastyczny koniec ”, co powoduje wyrównanie do prawej strony kontenera.
Po wykonaniu powyższego kodu strona wygląda tak:
Dane wyjściowe pokazują, że element div jest wyrównany do prawej przy użyciu układu elastycznego.
Metoda 4: Korzystanie z układu siatki
Układ siatki można również wykorzystać do wyrównania div do prawej. Struktura kodu HTML pozostaje taka sama:
.wyrównaj do prawej {wyświetlacz: siatka;
kolumny szablonu siatki: powtórz ( 2 , 1fr ) ;
}
wyrównane do prawej {
kolumna-siatki- początek : 2 ;
wypełnienie: 10px;
tło- kolor : turkusowy;
}
Opis kodu znajduje się poniżej:
- Najpierw wybierz nadrzędną klasę div „ .wyrównaj do prawej ” i ustaw jego „ wyświetlacz ”właściwość do” siatka ”.
- Następnie utwórz dwie kolumny o równym rozmiarze, używając „ kolumny szablonu siatki ' Ustawić ' powtórz(2, 1fr) ”.
- Na koniec wybierz potomną klasę div „ wyrównane do prawej ” i ustaw „ początek kolumny siatki ” na 2. Ta właściwość rozpoczyna element od drugiej kolumny, czyli od prawej strony.
Po wykonaniu powyższego kodu strona wygląda tak:
Dane wyjściowe pokazują, że div jest teraz wyrównany do prawej za pomocą „ siatka ” właściwości układu.
Wniosek
Aby wyrównać element div we właściwym kierunku, użyj „ platforma ”, „ Prawidłowy ”, „ elastyczny układ ', I ' układ siatki ' nieruchomości. „ platforma ” właściwość ustawia się w prawo, przypisując wartość „ 0px ”. Dla ' przewód ”, ustaw wyświetlanie na zginanie i użyj opcji „ wyrównać siebie ”właściwość do” elastyczny koniec ”. Korzystając z właściwości grid, utwórz dwie równe kolumny i spraw, aby element div potomny zaczynał się od drugiej kolumny.