CSS Dwa Divy obok siebie
Metody umieszczania dwóch divów obok siebie
Istnieje pięć różnych metod dostępnych w CSS do umieszczania dwóch DIV obok siebie:
- Wyświetlacz: metoda bloków wbudowanych
- Wyświetl: metoda tabeli
- Metoda Float CSS
- Metoda CSS FlexBox
- Metoda siatki CSS
Przykład nr 1: Za pomocą metody wyświetlacza: Bloku
Rozpoczynamy nasz kod HTML, otwierając nowy plik w kodzie Visual Studio, a następnie wybierając język HTML. Plik jest tworzony tutaj. Umieściliśmy „!„Znak, aby uzyskać podstawowe tagi. Tak więc, kiedy naciśniemy „Enter”, wszystkie podstawowe tagi HTML pojawią się w pliku.
Kodowanie zaczynamy od części ciała. Umieszczamy tutaj jeden nagłówek i dwa różne divy. Umieszczamy te dwa Divy obok siebie za pomocą właściwości „Display: Inline-Block” w CSS. W tym pliku HTML łączymy również plik CSS przed nadwoziem i wewnątrz „Głowa”. Teraz przejdź do pliku CSS i spójrz, w jaki sposób używamy tej właściwości do umieszczenia tych dwóch Divów obok siebie.
Tutaj, po wspomnianiu o nazwie Div, otwieramy kręcone aparaty ortodontyczne. Wewnątrz tych kręconych aparatów ortodontycznych używamy właściwości „Wyświetl” CSS. Musimy umieścić „wbudowany blok” jako wartość tej właściwości „wyświetlania”. Ta właściwość „wyświetlacza: inline-block” pomaga nam umieścić dwa divy, jeden po drugiej. Ta właściwość „wyświetlacza: inline-block” nie zapewnia „wysokości” i „szerokości”, więc musimy wspomnieć o osobnych właściwościach ustawiania „wysokości” i „szerokości”. Ustawiamy szerokość obu divs za pomocą właściwości „szerokości” i ustawiamy ją na „150px”. Ustawiamy wysokość obu divs na „100px”. „Tło” tych dwóch divs jest „różowe”. „Granica”, którą tutaj tworzymy dla obu Divów, to „2px” w kolorze „fioletowym” i typu „solid”. Kiedy piszemy tekst w tych divach, ustawiamy tekst w „środku” Div za pomocą właściwości „Wyrównanie tekstu”. Ustawiliśmy również „rozmiar czcionki” na „24px” i „rodzinę czcionki” na „algierskie”.
W wyjściu oba Divy są umieszczone obok siebie, ponieważ użyliśmy metody „Display: Inline-Block” na tych Divach. Oba Divy są tutaj renderowane jeden po drugim.
Przykład nr 2: Za pomocą metody wyświetlania: tabela
W tym przykładzie mamy nagłówek i tworzymy dwa divy o nazwie „komórek stołowych” wewnątrz głównych divów, które są „kontener” i „stołowy” divs. Używamy właściwości Display: Table w CSS do renderowania obu divów obok siebie.
Zaczynamy od stylizacji nagłówka. „W stylu czcionki”, którego używamy tutaj do nagłówka, jest „kursywa”. „Kolor”, którego używamy tutaj do nagłówka, to „Bord”. A „Rodzina czcionki”, której używamy, to „Algierski”. Następnie mamy klasę „kontenerową” Div. Używamy tutaj właściwości „Display: Table”, więc będzie wyświetlana oba Divy obok siebie. Ustawiliśmy „szerokość” na „40%”. Następnie, dla „Row tabeli”, ponownie używamy właściwości „Wyświetl”, ale tutaj stawiamy „Row tabeli”, ponieważ jej wartość i „wysokość” jest ustawiona na „130px”.
Następnie przechodzimy do div „komórek stołowych” i ustawiamy tutaj niektóre właściwości dla tych dwóch divów. Tworzymy granicę dla obu DIV, wykorzystując nieruchomość „graniczną”. Ta granica jest ustawiona na „2px” ze względu na szerokość, „solid” ze względu na swój typ, i „bordowy” dla koloru. Następnie ustawiamy jego „tło”, aby te Divy były atrakcyjne i używają koloru „lekkiego łososia” dla tej właściwości. Ustawiamy tutaj „wyświetlacz” jako „komórek stołowy”. „Wypośnienie”, którego tu używamy, to „2px”. Poza tym mamy trochę tekstu w Divs. Tutaj stosujemy trochę stylizacji do tekstu. „Rodzina czcionki” tekstu jest „algierska”, a ich „rozmiar czcionki” to „25px”. Dostosujemy te teksty do „centrum”.
Gdy zastosowaliśmy metodę „Wyświetl: tabela” na tych divach, pojawiają się one obok siebie na wyjściu. Oba Divy są renderowane obok siebie.
Przykład nr 3: Za pomocą metody Float
Tutaj, po nagłówku, mamy jeden główny div o imieniu „kontener” i umieszczamy w tym dwa różne divy. Tworzymy jeden div z nazwą „ST-box” i drugi div o nazwie „ND-box”. Umieszczamy również akapity do każdego div, z wyjątkiem głównego div. Użyjemy właściwości CSS Float do ustawienia obu divów obok siebie.
Ustawiamy „szerokość” i „Wysokość” Div „kontener”, umieszczając odpowiednio wartości „400px” i „190px”. „Kolor tła” pojemnika jest „zielony”. „Padding-Top” to „20px”, a „wyściółka-lewica” i „prawica wyściółka” są ustawione na „15px”. Teraz ustawiamy div „ST-box” i używamy właściwości „Float”. Tutaj ustawiliśmy to na „lewy”.
„Szerokość” i „wysokość” to odpowiednio „180px” i „160px”. „Kolor tła” tego „ST-box” jest „biały” z granicą koloru „czarnego” w typu „solidnym”. „Rozmiar czcionki” dla akapitu, który napisaliśmy w tym DIV, to „18px”. Właściwości div „nd-box” są takie same jak div „ST-box”, który już tutaj wyjaśniliśmy. Jedyną nową właściwością, którą tutaj dodamy, jest właściwość „marginesa” i ustawiamy ją na „20px”. Stylukujemy również trochę nagłówka, zmieniając jego „kolor” na „zielony”. „Times New Roman” jest tutaj wybierany jako „roda czcionki”.
Na tym zrzucie ekranu można zobaczyć, że dwie divy pojawiają się tutaj obok siebie. W tym przykładzie użyliśmy właściwości „pływak” do umieszczenia obu divów jeden po drugim.
Przykład nr 4: Za pomocą metody FlexBox
Mamy jeden główny div o nazwie „Flex-Container”, który zawiera dwa oddzielne divy. Z wyjątkiem głównej div, włożyliśmy niektóre akapity do każdego div. Oba Divy zostaną umieszczone obok siebie za pomocą metody CSS FlexBox w tym przykładzie.
Wyrównujemy nagłówek w „środku” i ustawiamy „rodzinę czcionki” na „algierskie”. Wspominamy o „Flex-Container” i umieszczamy właściwość „Display: Flex”. Umieściliśmy tę właściwość w pojemniku, aby właściwość „elastyczna” umieszczała element dziecięcy w kontekście elastycznym i wyrównała Divy obok siebie. W przypadku „Flex-Child” umieszczamy „Flex” i dajemy „1” jako jego wartość. Tworzymy granicę wokół każdego div, wykorzystując właściwość „granicę” i ustawiając ją na „czerwony” typ stały. Ustawiliśmy „rozmiar czcionki” akapitu, który jest zapisany w DIVS na „20px”. „Prawidłowe margines” „Flex-Child: First-dziecko” jest ustawione tutaj na „20px”.
Te Divy pojawiają się obok siebie w wyjściu, ponieważ w tym przykładzie użyliśmy właściwości „FlexBox”. Oba Divy są pokazane obok siebie.
Wniosek
Stworzyliśmy ten przewodnik, aby pomóc Ci zrozumieć właściwości CSS, które pomagają umieścić dwa Divy obok siebie. Ten przewodnik szczegółowo przeszedł ten temat. Przeszliśmy przez metody stosowane do umieszczania dwóch divów obok siebie w CSS. Wyjaśniliśmy, że istnieje pięć nieruchomości do umieszczenia dwóch divów obok siebie. Przeszliśmy przez cztery różne przypadki, w których użyliśmy czterech właściwości CSS do ustawiania dwóch divów obok siebie i dostarczyli wyjściowe, abyś mógł zobaczyć, jak działają te właściwości. Mam nadzieję, że będziesz w stanie dowiedzieć się, które właściwości CSS są używane do umieszczania DIVS obok siebie w CSS i jak je używać samodzielnie.