W tym artykule omówimy kolejno każde z wymienionych podejść i podamy odpowiedni przykład każdej metody.
Więc zacznijmy!
Metoda 1: Umieść dwa div obok siebie w CSS za pomocą siatki
CSS” krata ” układ pozwala użytkownikowi na umieszczenie dwóch lub więcej dwóch divów obok siebie. Zasadniczo siatka jest wartością właściwości wyświetlania używaną do tworzenia układu składającego się z wierszy i kolumn.
Składnia
Składnia właściwości wyświetlania z układem siatki jest podana poniżej:
wyświetlacz: siatka
Zobaczmy teraz przykład związany z umieszczaniem dwóch divów obok siebie w CSS za pomocą układu siatki.
Przykład
Tutaj utworzymy dwa div podrzędne wewnątrz div nadrzędnego, z nazwami klas jako „ rodzic ”, „ dziecko ' oraz ' dziecko ”:
< div klasa = 'rodzic' >< div klasa = 'dziecko' >< / div >
< div klasa = 'dziecko' >< / div >
< / div >
Następnie w sekcji CSS użyj „ .rodzic ”, aby uzyskać dostęp do nadrzędnego elementu div i ustawić wartość właściwości wyświetlania jako „ krata ”. Następnie ustaw ułamek za pomocą „ kolumny-szablonu siatki ” właściwość tworzenia miejsca na kolumny. W naszym przypadku ustawimy ułamki jako „ 1fr ' oraz ' 1fr ”, co oznacza, że oba elementy div uzyskały równe miejsce. Ponadto ustawimy odstęp między dwiema kolumnami za pomocą właściwości column-gap i ustawimy jej wartość jako „ 25px ”.
CSS:
.rodzic {wyświetlacz : krata ;
kolumny-szablonu siatki : 1 fr 1 fr ;
kolumna-przerwa : 25px ;
}
W kolejnym kroku używamy „ .dziecko ”, aby uzyskać dostęp do obu elementów div podrzędnych i ustawić wysokość elementów div jako „ 250px ” i ustaw kolor tła na „ rgb(253, 5, 109) ”:
.dziecko {wzrost : 250px ;
tło : RGB ( 253 , 5 , 109 ) ;
}
To pokaże następujący wynik:
Przejdźmy do innej metody umieszczania div obok siebie
Metoda 2: Umieść dwa div obok siebie w CSS za pomocą flex
„ przewód ” to wartość właściwości wyświetlania, która umożliwia umieszczenie dwóch elementów div obok siebie. Ta właściwość służy do ustawiania elastycznej długości elastycznego elementu. Zmniejsza lub powiększa elastyczny przedmiot, aby zmieścił się w jego pojemniku.
Składnia
Składnia właściwości display z flexem jest podana poniżej:
wyświetlacz: elastyczny;Przejdźmy do przykładu, aby zrozumieć podaną koncepcję.
Przykład
Rozważymy ten sam plik HTML i zastosujemy „ przewód ” do kontenera nadrzędnego. Tutaj ustawimy wartość właściwości display jako flex i ustawimy odstęp między podrzędnymi elementami div jako „ 10px ”:
.rodzic {wyświetlacz : przewód ;
luka : 10px ;
}
Następnie ustaw szerokość, wysokość i kolor tła div jako „ 650px ”, „ 200px ', oraz „rgb(0, 255, 42) ”, odpowiednio:
.dziecko {szerokość : 650px ;
wzrost : 200px ;
tło : RGB ( 0 , 255 , 42 ) ;
}
Wynik działania podanego kodu jest podany poniżej:
Metoda 3: Umieść dwa div obok siebie w CSS za pomocą float
Właściwość CSS float określa pływający kierunek elementu. Mówiąc dokładniej, ta właściwość może być wykorzystana do umieszczenia dwóch elementów div obok siebie w CSS.
Składnia
Składnia właściwości float to:
pływak: brak|lewo|prawoOto opis wyżej podanych wartości:
- Żaden: Służy do ograniczenia pływania.
- lewy: Służy do unoszenia elementów po lewej stronie.
- prawo: Służy do unoszenia elementów po prawej stronie.
Przejdźmy do przykładu umieszczania div obok siebie.
Przykład
Teraz utworzymy dwa div wewnątrz tagu
i przypiszemy nazwę klasy jako „ div1 ' oraz ' div2 ”: < ciało >< div klasa = „dział1” >< / div >
< div klasa = „dział2” >< / div >
< / ciało >
Następnie użyj „ .div1 ' oraz ' .div2 ”, aby uzyskać dostęp do kontenerów dodanych w sekcji HTML. Użyjemy obu elementów div w tej samej klasie, ponieważ właściwości i wartości, które przypiszemy do obu, są takie same.
Następnie przypisujemy wartość właściwości float jako „ lewy ” i ustaw szerokość i wysokość elementu div jako „ pięćdziesiąt% ' oraz ' 40% ”. Używamy również właściwości box-sizing i ustawiamy jej wartość jako „ ramka-pudełko ”. Ponadto ustaw kolor tła elementu div na „ rgb(7, 255, 222) ” i ustaw wartości właściwości granicy jako „ 3px ”, „ solidny ', oraz ' rgb(255, 0, 255) ”:
.div1 , .div2 {platforma : lewy ;
szerokość : pięćdziesiąt% ;
wzrost : 40% ;
rozmiar pudełka : ramka-pudełko ;
tło : RGB ( 7 , 255 , 222 ) ;
granica : 3px solidny RGB ( 255 , 0 , 255 ) ;
}
Notatka: Możesz umieścić dwa elementy div obok siebie bez używania właściwości rozmiaru pola i właściwości obramowania, ustawiając różne kolory tła elementów div.
Po zaimplementowaniu powyższego kodu wykonuje plik HTML i wyświetla wynik:
Notatka: Aby utworzyć przerwę między dwoma elementami div, najpierw utwórz kolejny element div, a następnie odpowiednio ustaw margines elementu div.
Wniosek
Elementy div można umieszczać obok siebie za pomocą trzech różnych metod CSS, które są „ przewód ' oraz ' krata ” wartości właściwości wyświetlania i „ platforma ' własność. Każda z metod działa wydajnie; jednak możesz wykorzystać każdy z nich zgodnie z naszymi wymaganiami. W tym przewodniku omówiliśmy trzy metody umieszczania div obok siebie za pomocą CSS i podaliśmy powiązane przykłady.