Kutumia kipengee CSS kuelekea Mali ya Kubuni Ukurasa wa Mtandao
Mali ya CSS ni mali muhimu sana kwa mpangilio. Inakuwezesha kuweka mipangilio yako ya ukurasa wa wavuti hasa kama unavyotaka kuonyesha - lakini ili uitumie unapaswa kuelewa jinsi inavyofanya kazi.
Katika karatasi ya mtindo, mali ya CSS kuelea mali inaonekana kama hii:
.right {kuelea: kulia; }
Hii inaelezea kivinjari kwamba kila kitu kilicho na darasa la "haki" kinapaswa kuelezwa kwa kulia.
Ungependa kuiweka kama hii:
darasa = "haki" />
Je! Je, Unaweza Kufungua na Mali ya CSS kuelea?
Huwezi kuelea kila kipengele kwenye ukurasa wa wavuti. Unaweza tu kuelea mambo ya kiwango cha kuzuia . Hizi ni mambo ambayo huchukua nafasi ya nafasi kwenye ukurasa, kama picha (), aya (), mgawanyiko (), na orodha ().
Vipengele vingine vinavyoathiri maandishi, lakini usijenge sanduku kwenye ukurasa huitwa vipengele vya ndani na hauwezi kueleweka. Hizi ni mambo kama muda (), mapumziko ya mstari (), mkazo mkali (), au italiki ().
Je! Wanajitokeza Wapi?
Unaweza kuelea mambo kwa kulia au kushoto. Kipengele chochote kinachofuata kipengele kinachozunguka kitapita kati ya kipengele kinachozunguka upande wa pili.
Kwa mfano, kama mimi kuelea picha upande wa kushoto, maandishi yoyote au mambo mengine kufuatia itapita katikati yake kwa haki. Na kama mimi kuelea picha kwa haki, maandishi yoyote au mambo mengine kufuatia itapita katikati yake kushoto. Picha ambayo imewekwa katika kizuizi cha maandishi bila mtindo wowote wa kuelea itatumika hata hivyo kivinjari kinawekwa kuonyesha picha.
Hii ni kawaida na mstari wa kwanza wa maandishi yaliyoonyeshwa chini ya picha.
Je! Wao Watakuja Mbali?
Kipengee ambacho kimesababishwa kitashiriki hadi upande wa kushoto au kulia wa kipengele cha chombo iwezekanavyo. Hii inasababisha hali tofauti tofauti kulingana na jinsi code yako imeandikwa.
Kwa mifano hii, nitakuwa akipanda kipengele kidogo cha DIV upande wa kushoto:
- Ikiwa kipengee kilichopunguka hachina upana wa awali, kitachukua nafasi ya usawa kama inavyotakiwa na inapatikana, bila kujali kuelea. Kumbuka: baadhi ya vivinjari hujaribu kuweka vipengele kando ya mambo yaliyotajwa wakati upana haufafanuzi-kwa kawaida hutoa kipengele ambacho haijatimiwa tu kiasi kidogo cha nafasi. Hivyo unapaswa daima kufafanua upana juu ya vipengee.
- Ikiwa kipengee cha chombo ni kipengele cha HTML, DIV iliyoelekezwa itakaa upande wa kushoto wa ukurasa.
- Ikiwa kipengele cha chombo ni yenyewe kilichosilishwa na kitu kingine, DIV iliyopigwa itaketi kwenye sehemu ya kushoto ya chombo.
- Unaweza kuingia vipande vya kiota, na hilo linaweza kusababisha kuogea kumalizika mahali pa kushangaza. Kwa mfano, kuelea hii ni DIV iliyoelekezwa kushoto ndani ya DIV iliyoelekezwa.
- Vipande vilivyozunguka vitakaa karibu na kila mmoja ikiwa kuna nafasi katika chombo. Kwa mfano, chombo hiki kina vipengee vitatu vya DIV vya upana wa 100px vinavyozunguka kwenye chombo cha 400px pana.
Unaweza hata kutumia kuelea ili uunda mpangilio wa nyumba ya sanaa. Unaweka kila thumbnail (inafanya kazi vizuri wakati wote ni ukubwa sawa) katika DIV na maelezo na kuelezea vipengele vya DIV katika chombo.
Haijalishi jinsi dirisha la kivinjari pana, ni vidole vilivyowekwa sawa.
Kugeuka kwenye Float
Mara unapojua jinsi ya kupata kipengele kuelea, ni muhimu kujua jinsi ya kuzima kuelea. Unazima kuelea kwa mali ya CSS iliyo wazi. Unaweza wazi kuelea kushoto, kuelea haki au zote mbili:
wazi: kushoto;
wazi: haki;
wazi: wote wawili;
Kipengele chochote ambacho utaweka mali ya wazi kitaonekana chini ya kipengele kilichoelezwa kuwa mwelekeo. Kwa mfano, katika mfano huu aya mbili za kwanza za maandishi haziwezi, lakini ya tatu ni.
Jaribu na thamani ya wazi ya vipengele tofauti kwenye nyaraka zako ili kupata madhara tofauti ya mpangilio.
Mojawapo ya mipangilio inayovutia zaidi inayozunguka ni mfululizo wa picha chini ya safu ya kulia au kushoto karibu na aya za maandiko. Hata kama maandiko hayatoshi kwa kupiga picha, unaweza kutumia wazi kwenye picha zote ili kuhakikisha kuwa zinaonekana kwenye safu kuliko sehemu ya picha iliyopita.
HTML (kurudia aya hii):
Duis aute irure dolor sed kufanya eiusmod tempor incididunt katika reprehenderit katika voluptate. Sio tukio la utendaji, unatumia kazi na unahitajika.
CSS (kuelea picha kwa kushoto):
img.float {kuelea: kushoto;
wazi: kushoto;
margin: 5px;
}
Na kwa haki:
img.float {kuelea: kulia;
wazi: haki;
margin: 5px;
}
Kutumia Floti kwa Mpangilio
Mara unapofahamu jinsi mali ya kuelea inavyofanya kazi, unaweza kuanza kuitumia ili kuweka ukurasa wako wa wavuti. Haya ni hatua ambazo mimi huchukua ili kuunda ukurasa wa wavuti unaozunguka:
- Tengeneza mpangilio (kwenye karatasi au kwenye chombo cha graphics au kichwa changu).
- Tambua wapi mgawanyiko wa ukurasa utakuwa.
- Kuamua upana wa vyombo mbalimbali na mambo ndani yao.
- Fungua kila kitu. Hata kipengele cha nje cha chombo kinaelekezwa upande wa kushoto ili nijue wapi itakuwa kuhusiana na bandari ya mtazamo wa kivinjari.
Kwa kadri unavyojua upana (asilimia ni nzuri) ya sehemu zako za mpangilio, unaweza kutumia mali ya kuelea ili uwaweke wapi kwenye ukurasa. Na jambo zuri ni, huna wasiwasi sana juu ya mfano wa sanduku kuwa tofauti kwa Internet Explorer au Firefox.