3 łatwe sposoby umieszczania dwóch divów obok siebie w CSS

Divs są używane głównie do tworzenia różnych sekcji w HTML, które można odpowiednio zaprojektować za pomocą CSS. Czasami może być konieczne umieszczenie dwóch divów obok siebie, aby stworzyć stylowy układ. W tym celu CSS zapewnia różne metody, takie jak:

• Używając "siatka"
• Używając "przewód"
• Używając "platforma"

W tym artykule omówimy każde z wymienionych podejść jeden po drugim i podamy odpowiedni przykład każdej metody.

Więc zacznijmy!

Metoda 1: Umieść dwa Divy obok siebie w CSS za pomocą siatki

CSS „siatka”Układ pozwala użytkownikowi umieścić dwa lub więcej dwóch divów obok siebie. Zasadniczo siatka jest wartością właściwości wyświetlacza używanej do utworzenia układu składającego się z wierszy i kolumn.

Składnia

Składnia właściwości wyświetlacza z układem siatki podano poniżej:

Wyświetlacz: siatka

Teraz sprawdźmy przykład związany z umieszczeniem dwóch divów obok siebie w CSS za pomocą układu siatki.

Przykład

Tutaj utworzymy dwa dzieci Divy w Div Parent, mając nazwiska klas jako „rodzic”,„dziecko" I "dziecko”:

Następnie w sekcji CSS użyj „.rodzic”Aby uzyskać dostęp do Div Parent i ustawić wartość właściwości wyświetlania jako„siatka". Następnie ustaw frakcję za pomocą „Kolecki z kratami„Właściwość do utworzenia miejsca dla kolumn. W naszym przypadku ustawiamy ułamki jako „1fr" I "1fr”, Co oznacza, że ​​oba Divy nabyły równą przestrzeń. Ponadto ustawimy lukę między dwiema kolumnami za pomocą właściwości GAP w kolumnie i ustawimy jej wartość jako „25px".

CSS:

.rodzic
Wyświetlacz: siatka;
Kolecka z kradzieży siatki: 1FR 1FR;
Gapa w kolumnie: 25px;

W następnym kroku używamy „.dziecko„Aby uzyskać dostęp zarówno do Child Div i ustawić wysokość Divs jako„250px”I ustaw kolor tła jako„RGB (253, 5, 109)”:

.dziecko
Wysokość: 250px;
Tło: RGB (253, 5, 109);

To pokaże następujący wynik:

Przejdźmy do innej metody, aby umieścić DIV obok siebie

Metoda 2: Umieść dwa Divy obok siebie w CSS za pomocą Flex

„„przewód”To wartość właściwości wyświetlacza, która umożliwia umieszczenie dwóch divów obok siebie. Ta właściwość służy do ustawienia elastycznej długości dla elastycznego elementu. Kurczy się lub uprawia elegancję, aby zmieścił się w pojemniku.

Składnia

Składnia właściwości wyświetlacza z Flex podano poniżej:

Wyświetlacz: Flex;

Przejdźmy do przykładu, aby zrozumieć określoną koncepcję.

Przykład

Rozważymy ten sam plik HTML i zastosujemy „przewód„Do kontenera nadrzędnego. Tutaj ustawimy wartość właściwości wyświetlacza jako Flex i ustawimy lukę między Dzieci Divs jako „10px”:

.rodzic
Wyświetlacz: Flex;
Gap: 10px;

Następnie ustaw szerokość, wysokość i kolor tła Div jako „650px”,„200px", I „RGB (0, 255, 42)”Odpowiednio:

.dziecko
Szerokość: 650px;
Wysokość: 200px;
Tło: RGB (0, 255, 42);

Wynik danego kodu podano poniżej:

Metoda 3: Umieść dwa Divy obok siebie w CSS za pomocą Float

Właściwość Float CSS określa pływający kierunek elementu. Mówiąc dokładniej, tę właściwość można wykorzystać do umieszczania dwóch Divów obok siebie w CSS.

Składnia

Składnia właściwości zmiennoprzecinkowej to:

Float: Brak | po lewej | prawy

Oto opis powyższych wartości:

• nic: Służy do ograniczenia pływającego.
• lewy: Służy do pływania elementów po lewej stronie.
• Prawidłowy: Służy do pływania elementów po prawej stronie.

Przejdźmy do przykładu umieszczenia Div obok siebie.

Przykład

Teraz utworzymy dwa divy wewnątrz znacznika i przypisamy nazwę klasy jako „div1" I "div2”:

Następnie użyj „.div1" I ".div2„Aby uzyskać dostęp do kontenerów dodanych w sekcji HTML. Będziemy używać obu div w tej samej klasie, ponieważ właściwości i wartości, które zamierzamy przypisać obu, są takie same.

Następnie przypisujemy wartość właściwości zmiennoprzecinkowej jako „lewy”I ustaw szerokość i wysokość Div jako„50%" I "40%". Używamy również właściwości rozmiaru i ustawiamy jej wartość jako „Box-box". Ponadto ustaw kolor tła Div jako „RGB (7, 255, 222)”I ustaw wartości właściwości granicznej jako„3px”,„solidny", I "RGB (255, 0, 255)”:

.div1, .div2
float: lewy;
Szerokość: 50%;
Wysokość: 40%;
Rozmiar pola: granica;
Tło: RGB (7, 255, 222);
granica: 3px Solid RGB (255, 0, 255);

Notatka: Możesz umieścić dwa Divy obok siebie bez użycia właściwości wielkości i właściwości granicznej, ustawiając różne kolory tła Divs.

Po wdrożeniu powyższego kodu wykonuje plik HTML i zobacz wynik:

Notatka: Aby utworzyć lukę między dwoma Divami, najpierw stwórz kolejną div, a następnie odpowiednio ustaw margines Div.

Wniosek

Divy mogą być umieszczone obok siebie za pomocą trzech różnych metod CSS, które są „”przewód" I "siatka”Wartości właściwości wyświetlania i„platforma" nieruchomość. Każda z metod działa skutecznie; Możesz jednak wykorzystać dowolny 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.