Käesolevas artiklis käsitleme kõiki mainitud lähenemisviise ükshaaval ja toome iga meetodi kohta sobiva näite.
Niisiis, alustame!
1. meetod: asetage ruudustiku abil CSS-i kaks osa kõrvuti
CSS' võre ” paigutus võimaldab kasutajal paigutada kaks või enam kahte div-d kõrvuti. Põhimõtteliselt on ruudustik kuvaatribuudi väärtus, mida kasutatakse ridadest ja veergudest koosneva paigutuse loomiseks.
Süntaks
Kuva atribuudi süntaks ruudustiku paigutusega on toodud allpool:
ekraan: ruudustik
Vaatame nüüd näidet, mis on seotud kahe divi kõrvuti paigutamisega CSS-is, kasutades ruudustiku paigutust.
Näide
Siin loome kaks alam-divist ülem-divisti, mille klassinimed on ' lapsevanem ”, „ laps ” ja „ laps ”:
< div klass = 'vanem' >< div klass = 'laps' >< / div >
< div klass = 'laps' >< / div >
< / div >
Järgmisena kasutage CSS-i jaotises ' .vanem ', et pääseda juurde ülem-div-ile ja määrata kuvatava atribuudi väärtuseks ' võre ”. Järgmisena määrake murd, kasutades ' ruudustik-mall-veerud ” atribuut veergude jaoks ruumi loomiseks. Meie puhul määrame murdudeks ' 1 fr ” ja „ 1 fr ”, mis tähendab, et mõlemad divid on omandanud võrdse ruumi. Lisaks määrame atribuudi veeruvahe abil vahe kahe veeru vahel ja määrame selle väärtuseks ' 25 pikslit ”.
CSS:
.vanem {kuva : võre ;
ruudustik-mall-veerud : 1 fr 1 fr ;
veeru-vahe : 25 pikslit ;
}
Järgmises etapis kasutame ' .laps ', et pääseda juurde mõlemale alam-div.-ile ja seada väärtuste kõrguseks ' 250 pikslit ja määrake taustavärviks ' rgb(253, 5, 109) ”:
.laps {kõrgus : 250 pikslit ;
taustal : rgb ( 253 , 5 , 109 ) ;
}
See näitab järgmist tulemust:
Liigume teise meetodi juurde, et paigutada div kõrvuti
2. meetod: asetage kaks osa CSS-is kõrvuti, kasutades paindet
' painduv ” on kuva omaduse väärtus, mis võimaldab paigutada kaks lahtrit kõrvuti. Seda atribuuti kasutatakse paindliku elemendi paindliku pikkuse määramiseks. See kahandab või kasvatab painduvat eset mahutisse mahutamiseks.
Süntaks
Kuvavara süntaks koos flexiga on toodud allpool:
ekraan: flex;Liigume esitatud kontseptsiooni mõistmiseks näite juurde.
Näide
Vaatleme sama HTML-faili ja rakendame ' painduv ” emakonteinerisse. Siin määrame kuva atribuudi väärtuseks flex ja alam-div-ide vaheliseks vaheks ' 10 pikslit ”:
.vanem {kuva : painduv ;
lõhe : 10 pikslit ;
}
Pärast seda määrake diivi laiuseks, kõrguseks ja taustavärviks ' 650 pikslit ”, „ 200 pikslit ”, ja 'rgb(0, 255, 42) ”, vastavalt:
.laps {laius : 650 pikslit ;
kõrgus : 200 pikslit ;
taustal : rgb ( 0 , 255 , 42 ) ;
}
Antud koodi tulemus on toodud allpool:
3. meetod: asetage kaks osa CSS-is kõrvuti ujuki abil
CSS float atribuut määrab elemendi ujumissuuna. Täpsemalt saab seda atribuuti kasutada CSS-is kahe div kõrvuti paigutamiseks.
Süntaks
Ujukomaduse süntaks on:
ujuk: puudub|vasak|paremSiin on ülaltoodud väärtuste kirjeldus:
- mitte ühtegi: Seda kasutatakse ujumise piiramiseks.
- vasakule: Seda kasutatakse vasakul küljel olevate elementide ujutamiseks.
- õige: Seda kasutatakse elementide ujumiseks paremal küljel.
Liigume näite juurde div kõrvuti asetamise kohta.
Näide
Nüüd loome märgendi
sees kaks div-i ja määrame klassi nimeks ' div1 ” ja „ div2 ”: < keha >< div klass = 'div1' >< / div >
< div klass = 'div2' >< / div >
< / keha >
Seejärel kasutage ' .div1 ” ja „ .div2 , et pääseda juurde HTML-i jaotisesse lisatud konteineritele. Kasutame mõlemat divisi samas klassis, kuna atribuudid ja väärtused, mille me mõlemale omistame, on samad.
Järgmisena määrame ujuva atribuudi väärtuseks ' vasakule ja määrake lahtri laiuseks ja kõrguseks ' viiskümmend% ” ja „ 40% ”. Kasutame ka kasti suuruse atribuuti ja määrame selle väärtuseks ' ääris-kast ”. Lisaks määrake diivi taustavärviks ' rgb(7, 255, 222) ' ja määrake piirikinnisvara väärtusteks ' 3 pikslit ”, „ tahke ”, ja „ rgb(255, 0, 255) ”:
.div1 , .div2 {ujuk : vasakule ;
laius : viiskümmend% ;
kõrgus : 40% ;
kasti suuruse määramine : ääris-kast ;
taustal : rgb ( 7 , 255 , 222 ) ;
piir : 3 pikslit tahke rgb ( 255 , 0 , 255 ) ;
}
Märge: Saate paigutada kaks lahtrit kõrvuti ilma kasti suuruse atribuuti ja piiri atribuuti kasutamata, määrates lahtrite erinevad taustavärvid.
Kui olete ülaltoodud koodi rakendanud, käivitage HTML-fail ja näete tulemust:
Märge: Kahe div vahel tühiku loomiseks loo esmalt teine div ja seejärel määra div veeris vastavalt.
Järeldus
Divid saab paigutada kõrvuti, kasutades kolme erinevat CSS-i meetodit, mis on ' painduv ” ja „ võre kuva atribuudi väärtused ja ujuk ” vara. Iga meetod töötab tõhusalt; siiski saate kasutada kõiki neid vastavalt meie nõuetele. Selles juhendis oleme arutanud kolme meetodit, kuidas CSS-i abil kõrvuti paigutada divid, ja esitanud seotud näiteid.