Šiame straipsnyje aptarsime kiekvieną iš minėtų metodų po vieną ir pateiksime tinkamą kiekvieno metodo pavyzdį.
Taigi, pradėkime!
1 būdas: naudodami tinklelį įdėkite du dalmenis vienas šalia kito CSS
CSS“ tinklelis “ išdėstymas leidžia vartotojui sudėti du ar daugiau dviejų „div“ elementų vienas šalia kito. Iš esmės tinklelis yra rodymo ypatybės, naudojamos maketui, susidedančiam iš eilučių ir stulpelių, sukurti.
Sintaksė
Ekrano ypatybės sintaksė su tinklelio išdėstymu pateikta toliau:
ekranas: tinklelis
Dabar pažiūrėkime pavyzdį, susijusį su dviejų „div“ įdėjimu vienas šalia kito CSS naudojant tinklelio išdėstymą.
Pavyzdys
Čia mes sukursime du antrinius div pirminio div viduje, kurių klasių pavadinimai yra „ tėvas “, „ vaikas “ ir „ vaikas “:
< div klasė = 'tėvas' >< div klasė = 'vaikas' >< / div >
< div klasė = 'vaikas' >< / div >
< / div >
Toliau CSS skiltyje naudokite „ .tėvas “ norėdami pasiekti pirminį div ir nustatyti rodymo ypatybės reikšmę kaip „ tinklelis “. Tada nustatykite trupmeną naudodami „ tinklelis-šablonas-stulpeliai “ savybę sukurti erdvę kolonoms. Mūsų atveju trupmenas nustatysime kaip „ 1fr “ ir „ 1fr “, o tai reiškia, kad abu skyriai įgijo vienodą erdvę. Be to, mes nustatysime tarpą tarp dviejų stulpelių naudodami stulpelio tarpo ypatybę ir nustatysime jo vertę kaip „ 25 piks “.
CSS:
.tėvas {ekranas : tinklelis ;
tinklelis-šablonas-stulpeliai : 1fr 1fr ;
stulpelis-tarpelis : 25 piks ;
}
Kitame žingsnyje mes naudojame „ .vaikas “ norėdami pasiekti abu antrinius div ir nustatyti div aukštį kaip „ 250 piks “ ir nustatykite fono spalvą kaip „ rgb(253, 5, 109) “:
.vaikas {aukščio : 250 piks ;
fone : rgb ( 253 , 5 , 109 ) ;
}
Tai parodys tokį rezultatą:
Pereikime prie kito metodo, norėdami įdėti div greta
2 būdas: CSS naudodami „flex“ pastatykite du „Divis“ vienas šalia kito
„ lankstus “ yra rodymo ypatybės, leidžiančios sudėti du „div“, vertė. Ši savybė naudojama lanksčiam elemento ilgiui nustatyti. Jis susitraukia arba padidina lanksčią prekę, kad tilptų į konteinerį.
Sintaksė
Toliau pateikta rodymo ypatybių su flex sintaksė:
ekranas: lankstus;Pereikime prie pavyzdžio, kad suprastume pateiktą sąvoką.
Pavyzdys
Mes apsvarstysime tą patį HTML failą ir pritaikysime „ lankstus “ į pirminį konteinerį. Čia nustatysime rodymo ypatybės reikšmę kaip „flex“ ir nustatysime tarpą tarp antrinių divų kaip „ 10 piks “:
.tėvas {ekranas : lankstus ;
tarpas : 10 piks ;
}
Po to nustatykite div plotį, aukštį ir fono spalvą kaip „ 650 taškų “, „ 200 piks “ ir 'rgb(0, 255, 42) “, atitinkamai:
.vaikas {plotis : 650 taškų ;
aukščio : 200 piks ;
fone : rgb ( 0 , 255 , 42 ) ;
}
Pateikto kodo rezultatas pateikiamas žemiau:
3 būdas: naudodami plūduriuojančią funkciją, CSS įdėkite du skyrelius vienas šalia kito
CSS float ypatybė nurodo elemento slankiąją kryptį. Tiksliau sakant, ši savybė gali būti naudojama dviems „div“ elementams CSS sudėti vienas šalia kito.
Sintaksė
Plūduriuojančios savybės sintaksė yra tokia:
plūduriuoti: nėra|kairė|dešinėČia yra aukščiau pateiktų verčių aprašymas:
- nė vienas: Jis naudojamas plūduriavimui apriboti.
- liko: Jis naudojamas elementams plūduriuoti kairėje pusėje.
- dešinėje: Jis naudojamas elementams plūduriuoti dešinėje pusėje.
Pereikime prie „div“ padėjimo greta pavyzdžio.
Pavyzdys
Dabar mes sukursime du „div“ žymos
viduje ir priskirsime klasės pavadinimą kaip „ div1 “ ir „ div2 “: < kūnas >< div klasė = 'div1' >< / div >
< div klasė = 'div2' >< / div >
< / kūnas >
Tada naudokite ' .div1 “ ir „ .div2 “, kad pasiektumėte HTML skiltyje pridėtus konteinerius. Abu divus naudosime toje pačioje klasėje, nes ypatybės ir reikšmės, kurias ketiname priskirti abiem, yra vienodos.
Toliau plūduriuojančios savybės vertę priskiriame kaip „ paliko “ ir nustatykite div plotį ir aukštį kaip „ penkiasdešimt % “ ir „ 40 % “. Taip pat naudojame dėžutės dydžio savybę ir nustatome jos vertę kaip „ kraštinė-dėžė “. Be to, nustatykite div fono spalvą kaip „ rgb(7, 255, 222) “ ir pasienio nuosavybės vertes nustatykite kaip „ 3 piks “, „ kietas “ ir „ rgb(255, 0, 255) “:
.div1 , .div2 {plūdė : paliko ;
plotis : penkiasdešimt % ;
aukščio : 40 % ;
dėžutės dydžio : kraštinė-dėžė ;
fone : rgb ( 7 , 255 , 222 ) ;
siena : 3 piks kietas rgb ( 255 , 0 , 255 ) ;
}
Pastaba: Galite įdėti du „div“ vienas šalia kito nenaudodami langelio dydžio ir kraštinės nuosavybės, nustatydami skirtingas „div“ fono spalvas.
Įdiegę aukščiau pateiktą kodą, paleiskite HTML failą ir pamatysite rezultatą:
Pastaba: Norėdami sukurti tarpą tarp dviejų „div“, pirmiausia sukurkite kitą „div“ ir atitinkamai nustatykite „div“ paraštę.
Išvada
Divus galima sudėti vienas šalia kito naudojant tris skirtingus CSS metodus, kurie yra „ lankstus “ ir „ tinklelis “ rodymo ypatybės vertės ir „ plūdė ' nuosavybė. Kiekvienas iš metodų veikia efektyviai; tačiau jūs galite naudoti bet kurį iš jų pagal mūsų reikalavimus. Šiame vadove aptarėme tris būdus, kaip sudėti „div“ greta naudojant CSS, ir pateikėme susijusių pavyzdžių.