Šajā rakstā mēs apspriedīsim katru no minētajām pieejām pa vienam un sniegsim piemērotu piemēru katrai metodei.
Tātad, sāksim!
1. metode. Izmantojot režģi, ievietojiet divus dalījumus blakus CSS
CSS ' režģis ” izkārtojums ļauj lietotājam novietot divus vai vairāk divus divus blakus. Būtībā režģis ir displeja rekvizīta vērtība, ko izmanto, lai izveidotu izkārtojumu, kas sastāv no rindām un kolonnām.
Sintakse
Displeja rekvizīta sintakse ar režģa izkārtojumu ir norādīta tālāk:
displejs: režģis
Tagad apskatīsim piemēru, kas saistīts ar divu div vienumu izvietošanu blakus CSS, izmantojot režģa izkārtojumu.
Piemērs
Šeit mēs izveidosim divus pakārtotos divelementus vecākdiv. elementā ar klases nosaukumiem kā vecāks ”, “ bērns ' un ' bērns ”:
< div klasē = 'vecāks' >< div klasē = 'bērns' >< / div >
< div klasē = 'bērns' >< / div >
< / div >
Tālāk sadaļā CSS izmantojiet “ .vecāks ”, lai piekļūtu vecākajam div un iestatītu displeja rekvizīta vērtību kā “ režģis ”. Pēc tam iestatiet daļu, izmantojot ' režģis-veidne-kolonnas ” īpašums, lai izveidotu vietu kolonnām. Mūsu gadījumā mēs iestatīsim daļskaitļus kā “ 1fr ' un ' 1fr ”, kas nozīmē, ka abi divi ir ieguvuši vienādu vietu. Turklāt mēs iestatīsim atstarpi starp divām kolonnām, izmantojot kolonnu atstarpes rekvizītu, un iestatīsim tā vērtību kā “ 25 pikseļi ”.
CSS:
.vecāks {displejs : režģis ;
režģis-veidne-kolonnas : 1fr 1fr ;
kolonna-sprauga : 25 pikseļi ;
}
Nākamajā darbībā mēs izmantojam “ .bērns ”, lai piekļūtu gan pakārtotajam div, gan iestatītu div augstumu kā “ 250 pikseļi un iestatiet fona krāsu kā ' rgb(253, 5, 109) ”:
.bērns {augstums : 250 pikseļi ;
fons : rgb ( 253 , 5 , 109 ) ;
}
Tas parādīs šādu rezultātu:
Pāriesim pie citas metodes, lai div blakus novietotu
2. metode: CSS izmantojot flex, ievietojiet divus divpunktus blakus
' flex ” ir displeja rekvizīta vērtība, kas ļauj novietot divus divus vienumus blakus. Šis rekvizīts tiek izmantots, lai iestatītu elastīgā izstrādājuma elastīgo garumu. Tas samazina vai palielina elastīgo priekšmetu, lai tas ietilptu traukā.
Sintakse
Displeja rekvizīta sintakse ar flex ir norādīta tālāk:
displejs: flex;Pāriesim pie piemēra, lai saprastu norādīto jēdzienu.
Piemērs
Mēs izskatīsim to pašu HTML failu un lietosim “ flex ” uz vecāku konteineru. Šeit mēs iestatīsim displeja rekvizīta vērtību kā flex un iestatīsim atstarpi starp pakārtotajiem elementiem kā ' 10 pikseļi ”:
.vecāks {displejs : flex ;
plaisa : 10 pikseļi ;
}
Pēc tam iestatiet dimensijas platumu, augstumu un fona krāsu kā ' 650 pikseļi ”, “ 200 pikseļi ', un “rgb(0, 255, 42) ”, attiecīgi:
.bērns {platums : 650 pikseļi ;
augstums : 200 pikseļi ;
fons : rgb ( 0 , 255 , 42 ) ;
}
Dotā koda rezultāts ir norādīts zemāk:
3. metode: CSS izmantojot pludiņu, ievietojiet divus punktus blakus
CSS float rekvizīts norāda elementa peldošo virzienu. Precīzāk, šo rekvizītu var izmantot, lai CSS pakalpojumā novietotu divus div vienumu blakus.
Sintakse
Peldošā rekvizīta sintakse ir:
peldēt: nav|pa kreisi|pa labiŠeit ir aprakstīts iepriekš norādītās vērtības:
- neviens: To izmanto, lai ierobežotu peldēšanu.
- pa kreisi: To izmanto, lai peldētu elementus kreisajā pusē.
- pa labi: To izmanto, lai peldētu elementus labajā pusē.
Pāriesim pie piemēra par div izvietošanu blakus.
Piemērs
Tagad tagā
mēs izveidosim divus div un piešķirsim klases nosaukumu kā ' div1 ' un ' div2 ”: < ķermeni >< div klasē = 'div1' >< / div >
< div klasē = 'div2' >< / div >
< / ķermeni >
Pēc tam izmantojiet “ .div1 ' un ' .div2 ”, lai piekļūtu HTML sadaļā pievienotajiem konteineriem. Mēs izmantosim abus divelementus vienā klasē, jo rekvizīti un vērtības, ko piešķirsim abiem, ir vienādi.
Tālāk mēs piešķiram peldošā īpašuma vērtību kā ' pa kreisi ' un iestatiet div platumu un augstumu kā ' piecdesmit% ' un ' 40% ”. Mēs izmantojam arī kastes izmēra rekvizītu un iestatām tā vērtību kā “ apmale-box ”. Turklāt iestatiet div fona krāsu kā ' rgb(7, 255, 222) ” un iestatiet pierobežas īpašuma vērtības kā „ 3 pikseļi ”, “ ciets ', un ' rgb(255, 0, 255) ”:
.div1 , .div2 {peldēt : pa kreisi ;
platums : piecdesmit% ;
augstums : 40% ;
kastes izmēra noteikšana : apmale-box ;
fons : rgb ( 7 , 255 , 222 ) ;
robeža : 3 pikseļi ciets rgb ( 255 , 0 , 255 ) ;
}
Piezīme: Varat novietot divus “div” vienumus blakus, neizmantojot lodziņa izmēra rekvizītus un apmales rekvizītus, iestatot dažādas “div” fona krāsas.
Kad esat ieviesis iepriekš minēto kodu, izpildiet HTML failu un skatiet rezultātu:
Piezīme: Lai izveidotu atstarpi starp diviem div, vispirms izveidojiet vēl vienu div un pēc tam iestatiet attiecīgi div malu.
Secinājums
Divus var novietot blakus, izmantojot trīs dažādas CSS metodes, kas ir “ flex ' un ' režģis ' displeja rekvizīta vērtības un ' peldēt ” īpašums. Katra no metodēm darbojas efektīvi; tomēr jūs varat izmantot jebkuru no tiem atbilstoši mūsu prasībām. Šajā rokasgrāmatā mēs esam apsprieduši trīs metodes, kā novietot div blakus, izmantojot CSS, un sniedzuši saistītos piemērus.