V tomto článku rozoberieme každý zo spomínaných prístupov jeden po druhom a uvedieme vhodný príklad každej metódy.
Takže, začnime!
Metóda 1: Umiestnite dva prvky Div vedľa seba do CSS pomocou mriežky
CSS ' mriežka ” rozloženie umožňuje užívateľovi umiestniť dva alebo viac dvoch divov vedľa seba. Mriežka je v podstate hodnota vlastnosti zobrazenia, ktorá sa používa na vytvorenie rozloženia pozostávajúceho z riadkov a stĺpcov.
Syntax
Syntax vlastnosti zobrazenia s rozložením mriežky je uvedená nižšie:
displej: mriežka
Teraz sa pozrime na príklad súvisiaci s umiestnením dvoch prvkov div vedľa seba v CSS pomocou rozloženia mriežky.
Príklad
Tu vytvoríme dva podriadené divy vo vnútri rodičovského divu s názvami tried ako „ rodič “, “ dieťa “ a „ dieťa “:
< div trieda = 'rodič' >< div trieda = 'dieťa' < / div >
< div trieda = 'dieťa' < / div >
< / div >
Ďalej v sekcii CSS použite „ .rodič ” pre prístup k rodičovskému div a nastavenie hodnoty vlastnosti display ako “ mriežka “. Potom nastavte zlomok pomocou „ mriežka-šablóna-stĺpce ” na vytvorenie priestoru pre stĺpce. V našom prípade zlomky nastavíme ako „ 1fr “ a „ 1fr “, čo znamená, že obidva divy získali rovnaký priestor. Ďalej nastavíme medzeru medzi dvoma stĺpcami pomocou vlastnosti column-gap a nastavíme jej hodnotu ako „ 25 pixelov “.
CSS:
.rodič {displej : mriežka ;
mriežka-šablóna-stĺpce : 1fr 1fr ;
stĺpec-medzera : 25 pixelov ;
}
V ďalšom kroku použijeme „ .dieťa “, aby ste získali prístup k obom podradeným prvkom div a nastavte ich výšku ako „ 250 pixelov “ a nastavte farbu pozadia ako „ rgb(253, 5, 109) “:
.dieťa {výška : 250 pixelov ;
pozadie : rgb ( 253 , 5 , 109 ) ;
}
To ukáže nasledujúci výsledok:
Prejdime k inej metóde umiestnenia div vedľa seba
Metóda 2: Umiestnite dva prvky Div vedľa seba do CSS pomocou flex
' flex ” je hodnota vlastnosti display, ktorá umožňuje umiestniť dva divy vedľa seba. Táto vlastnosť sa používa na nastavenie flexibilnej dĺžky pre flexibilnú položku. Zmršťuje alebo zväčšuje ohybný predmet, aby sa zmestil do kontajnera.
Syntax
Syntax vlastnosti zobrazenia s flex je uvedená nižšie:
displej: flex;Prejdime k príkladu, aby sme pochopili uvedený koncept.
Príklad
Zvážime rovnaký súbor HTML a použijeme „ flex “ do nadradeného kontajnera. Tu nastavíme hodnotu vlastnosti display ako flex a nastavíme medzeru medzi podradenými div ako „ 10 pixelov “:
.rodič {displej : flex ;
medzera : 10 pixelov ;
}
Potom nastavte šírku, výšku a farbu pozadia prvku div ako „ 650 pixelov “, “ 200 pixelov “ a 'rgb(0, 255, 42) “, respektíve:
.dieťa {šírka : 650 pixelov ;
výška : 200 pixelov ;
pozadie : rgb ( 0 , 255 , 42 ) ;
}
Výsledok daného kódu je uvedený nižšie:
Metóda 3: Umiestnite dva prvky Div vedľa seba do CSS pomocou float
Vlastnosť CSS float určuje smer pohybu prvku. Presnejšie povedané, táto vlastnosť môže byť použitá na umiestnenie dvoch divov vedľa seba v CSS.
Syntax
Syntax vlastnosti float je:
plavák: žiadny|vľavo|vpravoTu je popis vyššie uvedených hodnôt:
- žiadne: Používa sa na obmedzenie plávania.
- vľavo: Používa sa na plávanie prvkov na ľavej strane.
- správny: Používa sa na plávanie prvkov na pravej strane.
Prejdime k príkladu umiestnenia div vedľa seba.
Príklad
Teraz vytvoríme dva divy vo vnútri značky
a priradíme názov triedy ako „ div1 “ a „ div2 “: < telo >< div trieda = 'div1' < / div >
< div trieda = 'div2' < / div >
< / telo >
Potom použite „ .div1 “ a „ .div2 ” na prístup ku kontajnerom pridaným v sekcii HTML. Obidva divy použijeme v tej istej triede, pretože vlastnosti a hodnoty, ktoré obom priradíme, sú rovnaké.
Ďalej priradíme hodnotu vlastnosti float ako „ vľavo “ a nastavte šírku a výšku prvku div ako „ päťdesiat percent “ a „ 40 % “. Používame aj vlastnosť box-sizing a nastavujeme jej hodnotu ako „ border-box “. Ďalej nastavte farbu pozadia div ako „ rgb(7, 255, 222) “ a nastavte hodnoty vlastnosti border ako „ 3px “, “ pevný “ a „ rgb(255, 0, 255) “:
.div1 , .div2 {plavák : vľavo ;
šírka : päťdesiat percent ;
výška : 40 % ;
box-sizing : border-box ;
pozadie : rgb ( 7 , 255 , 222 ) ;
hranica : 3px pevný rgb ( 255 , 0 , 255 ) ;
}
Poznámka: Môžete umiestniť dva prvky div vedľa seba bez použitia vlastnosti veľkosti boxu a vlastnosti border nastavením rôznych farieb pozadia prvkov div.
Po implementácii vyššie uvedeného kódu sa spustí súbor HTML a zobrazí sa výsledok:
Poznámka: Ak chcete vytvoriť medzeru medzi dvoma segmentmi div, najprv vytvorte ďalší prvok div a potom podľa toho nastavte okraj prvku div.
Záver
Divs je možné umiestniť vedľa seba pomocou troch rôznych metód CSS, ktoré sú „ flex “ a „ mriežka ” hodnoty vlastnosti display a “ plavák ' nehnuteľnosť. Každá z metód funguje efektívne; môžete však použiť ktorýkoľvek z nich podľa našich požiadaviek. V tejto príručke sme diskutovali o troch metódach umiestnenia div vedľa seba pomocou CSS a poskytli súvisiace príklady.