Ukusebenzisa indawo ye-CSS yokuklaba Impahla Yokwakha Amakheli Ekhasi Lewebhu
Impahla ye-CSS iyimpahla ebaluleke kakhulu yokuhlela. Ikuvumela ukuthi ubeke imiklamo yekhasi lakho lewebhu ngendlela oyifunayo ngayo-kodwa ukuze uyisebenzise kufanele uqonde ukuthi isebenza kanjani.
Esikhathini seshidi lesitayela, impahla ye-CSS ehambayo ibukeka kanje:
.right {float: kwesokudla; }}
Lokhu kusitshela isiphequluli ukuthi yonke into eneklasi "yokunene" kufanele ihanjiswe ngakwesokudla.
Ungabeka njengalokhu:
isigaba = "kwesokudla" />
Yini Ongayikhukhula Ngayo Impahla ye-CSS?
Awukwazi ukuhambisa zonke izinto kwikhasi lewebhu. Ungangena kuphela izakhi zezinga lokuvimba . Lezi yizici ezithatha isikhala sekhasi ekhasini, njengezithombe (), izigaba (), izigaba (), nezinhlu ().
Ezinye izakhi ezithinta umbhalo, kodwa ungadali ibhokisi ekhasini libizwa ngokuthi izakhi ezifakwe ngaphakathi futhi azikwazi ukuhanjiswa. Lezi zici ezifana ne-span (), ukuhlukana kwemigqa (), ukugcizelela okuqinile (), noma emitlolo ().
Zilapho Zifaka khona?
Ungakwazi ukungena ezintweni ngakwesokudla noma ngakwesobunxele. Noma iyiphi into elandela i-floated element izogeleza kuzungeze into ehambile ngakolunye uhlangothi.
Isibonelo, uma ngidlulisela isithombe ngakwesobunxele, noma yikuphi umbhalo noma ezinye izakhi ezilandelayo eziyozungezela ngakwesokudla. Futhi uma ngiphakamisa isithombe ngakwesokudla, noma yikuphi umbhalo noma ezinye izakhi ezikulandelayo kuzogeleza kuzungeze ngakwesokunxele. Isithombe esabekwa ebhokisini lombhalo ngaphandle kwesitayela sokufiphaza esisetshenziswe kuso sizobonisa ukuthi isiphequluli sisethelwe ukubonisa izithombe.
Lokhu kuvame ukuba nomugqa wokuqala wombhalo oboniswe phansi kwesithombe.
Bazokudela Kangakanani?
Isici esiye sanyuka sizohamba kuze kube ngakwesobunxele noma kwesokudla kwesici sesitsha njengoba singakwazi. Lokhu kubangela izimo eziningana ezehlukene kuye ngokuthi ikhodi yakho ibhaliwe kanjani.
Kulezi zibonelo, ngizobe ngifaka isici esincane se-DIV ngakwesobunxele:
- Uma into ehambile engenawo ububanzi obuchazwe ngaphambili, izothatha isikhala esingenasidingo njengoba kudingeka futhi sitholakale, kungakhathaliseki ukuthi siyaphi. Qaphela: ezinye iziphequluli zizama ukubeka izinto ngaphandle kwezinto ezizungezile lapho ububanzi bengachazwanga-ngokuvamile ukunikeza isici esingenakunyakaziswa kuphela isikhala esincane. Ngakho kufanele njalo uchaze ububanzi ezintweni ezifakiwe.
- Uma isici se-container yisici se-HTML, i-DIV ehambile izohlala emkhawulweni wesokunxele wekhasi.
- Uma isici sesitsha sinezinye izinto eziqukethe enye into, i-DIV ehambile izohlala engxenyeni engakwesokunxele yesitsha.
- Ungayidla izidalwa, futhi lokho kungaholela ekutheni kufinyelele endaweni ebabazayo. Isibonelo, le float yi-DIV ehamba ngakwesokunxele ngaphakathi kwe-DIV ehambile.
- Izakhi ezikhukhulayo zizohlala eduze komunye nomunye uma kukhona igumbi esitsheni. Isibonelo, lesi sitsha sinezici ezintathu ze-DIV ezibanzi ze-DIV ezithele ku-400px isitsha esikhulu.
Ungasebenzisa ngisho ukufaka ukudala isakhiwo segalari yezithombe. Ubeka isithonjana ngasinye (sisebenza kahle uma sisayizi wonke ofanayo) ku-DIV enegama-ncazo bese ugoqa izinto ze-DIV esitsheni.
Kungakhathaliseki ukuthi iwindi lesiphequluli libanzi kangakanani, izithonjana zizohambisana ngokufanayo.
Ivula ukukhuphuka
Uma wazi ukuthi ungayithola kanjani into ukuze uhambise, kubalulekile ukwazi ukuthi ungavala kanjani i-float. Uvala i-float nge-CSS impahla ecacile. Ungasula izintantshi ezisele, ukuzula ngakwesokudla noma kokubili:
cima: kwesokunxele;
cima: kwesokudla;
cisha: kokubili;
Noma yisiphi isici osibekayo impahla ecacile sizovela ngezansi kwezinto ezizungeze leso siqondiso. Isibonelo, kulesi sibonelo izigaba ezimbili zokuqala zombhalo azisusiwe, kodwa okwesithathu.
Dlala ngokubaluleka okucacile kwezakhi ezahlukene kumadokhumenti wakho ukuze uthole imiphumela ehlukile yohlelo.
Enye yezakhiwo ezithakazelisayo kunazo zonke uchungechunge lwezithombe phansi kwekholomu engakwesokudla noma kwesobunxele eduze kwezingxenye zombhalo. Ngisho noma umbhalo awulangale ngokwanele ukupheqa isithombe esidlule, ungasebenzisa ukucaca kuzo zonke izithombe ukuze uqiniseke ukuthi zivela kukholomu kunokusondela kwesithombe esedlule.
I-HTML (phinda le ndima):
Duis aute kakhudlwana dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate. Akuyona into eyenzekayo, uzosebenza futhi usebenzise i-magna aliqua.
I-CSS (ukuzulazula izithombe ngakwesokunxele):
img.float {float: kwesokunxele;
cima: kwesokunxele;
umkhawulo: 5px;
}}
Futhi ngakwesokudla:
img.float {float: kwesokudla;
cima: kwesokudla;
umkhawulo: 5px;
}}
Ukusebenzisa izakhiwo zokuhlela
Uma usuqonda ukuthi impahla esebenzayo isetshenziswa kanjani, ungaqala ukuyisebenzisa ukubeka amakhasi akho ewebhu. Lezi yizinyathelo engizithathayo ukudala ikhasi lewebhu elihambile:
- Yakha isakhiwo (ephepheni noma ithuluzi elihluzisayo noma ekhanda lami).
- Hlola ukuthi ukuhlukaniswa kwekhasi kuzoba kuphi.
- Hlola ububanzi beziqukathi ezihlukahlukene kanye nezakhi ngaphakathi kwazo.
- Sula konke. Ngisho nesici se-container esingaphandle sidluliselwa ngakwesobunxele ukuze ngazi ukuthi kuzoba kuphi maqondana nesiphequluli sokubukwa kwesiphequluli.
Uma nje wazi ukuthi ububanzi (amaphesenti ahle) ezigceni zakho zokuhlela, ungasebenzisa impahla ye-float ukuze uwabeke lapho abakubo ekhasini. Futhi into enhle ukuthi, akudingeki ukhathazeke kakhulu mayelana nomfanekiso webhokisi ohlukile kwi-Internet Explorer noma i-Firefox.