Sanin CSS Float

Amfani da CSS Gudun Dama Gida don Zayyana Shafukan Shafukan yanar gizo

CSS mallakar dukiya ce mai mahimmanci ga kayan aiki. Yana ba ka damar sanya shafukan shafin yanar gizonka kamar yadda kake son su nuna-amma don amfani da shi dole ka fahimci yadda yake aiki.

A cikin takardar launi, ƙwayar CSS na tasowa kamar wannan:

.right {float: dama; }

Wannan ya nuna wa mai bincike cewa duk abin da ke "dama" ya kamata a yi iyo a dama.

Za ku sanya shi kamar haka:

class = "dama" />

Mene ne Kuna iya Turawa Da Kayan CSS?

Ba za ku iya taso kan kowane abu a shafin yanar gizon ba. Za ku iya yin iyo kawai a kan abubuwa masu tasowa. Waɗannan su ne abubuwan da suke ɗaukar wani sashe na sarari a shafi, kamar hotuna (), sakin layi (), rabuwa (), da kuma jerin ().

Sauran abubuwan da ke shafar rubutu, amma kada ka ƙirƙiri akwatin a kan shafin an kira abubuwan haruffa kuma ba za a iya iyo ba. Wadannan sune abubuwa kamar span (), ragowar layi (), ƙarfafawa (), ko kuma gwada ().

Ina Yasa Suna Tasowa?

Zaka iya kaya abubuwa zuwa dama ko hagu. Duk wani nau'i wanda ya biyo baya zai kasance yana gudana a kusa da nau'in mai iyo a gefe ɗaya.

Alal misali, idan na ninka hotunan zuwa hagu, kowane rubutu ko wasu abubuwa masu biyo baya zai gudana kewaye da shi zuwa dama. Kuma idan na kalli hoto zuwa dama, duk wani rubutu ko wasu abubuwan da zasu biyo baya zai gudana a hannun hagu. Hoton da aka sanya shi a cikin wani akwati na rubutu ba tare da wani nau'in jirgi mai amfani da shi ba zai nuna duk da haka an saita browser don nuna hotuna.

Wannan shi ne mafi yawa tare da layin farko na bin rubutun da aka nuna a kasa na hoton.

Yaya Nesa Za Su Tura?

Wani ɓangaren da aka yi iyo zai motsa har zuwa hagu ko dama na takaddun ganga kamar yadda zai iya. Wannan yana haifar da yanayi daban-daban dangane da yadda aka rubuta lambarka.

Ga waɗannan misalai, zan yi motsi da karamin nau'i na DIV zuwa hagu:

Kuna iya amfani da kaya don ƙirƙirar layout na hoto. Kuna sanya kowane samfurin (yana aiki mafi kyau idan sun kasance girman daidai) a cikin DIV tare da ɗaukar hoto da kuma tayar da abubuwan DIV a cikin akwati.

Komai yaduwar girman browser shine, zane-zanen siffofi za su daidaita gaba daya.

Juya Kashe Ruwa

Da zarar kun san yadda za a sami rabi don yin iyo, yana da muhimmanci a san yadda za a kashe taso kan ruwa. Kuna kashe jirgin ruwa tare da maɓallin CSS bayyananne. Zaka iya share shingen hagu, 'yan kogi ko duka biyu:

bayyane: hagu;
bayyana: dama;
bayyana: duka biyu;

Duk wani ɓangaren da ka saita kyauta ga dukiyar za ta bayyana a kasa wani ɓangaren da ke cikin wannan shugabanci. Alal misali, a cikin wannan misali, ba a bar sakin layi na biyu na farko ba, amma na uku shine.

Yi wasa tare da darajar darajar abubuwa daban-daban a cikin takardun ku don samun sakamako daban-daban na layout.

Ɗaya daga cikin shimfidar wuri mai ban sha'awa shine jerin hotunan ƙasa a gefen dama ko hagu kusa da sakin layi na rubutu. Ko da ma rubutun ba ya daina isa gungurawa da hoton, zaka iya amfani da bayyana a kan dukkan hotuna don tabbatar da cewa sun bayyana a cikin shafi maimakon na gaba da siffar da ta gabata.

A HTML (maimaita wannan sakin layi):


Duis wani abu ne mai sauƙi a lokacin da za a yi amfani da shi a cikin tsari. Cupidatat wanda ba shi da laifi, ya yi aiki da kuma ba tare da izini ba.

CSS (don tayar da hotuna zuwa hagu):

img.float {float: hagu;
bayyane: hagu;
gefe: 5px;
}

Kuma zuwa ga dama:

img.float {float: dama;
bayyana: dama;
gefe: 5px;
}

Yin amfani da Floats for Layout

Da zarar ka fahimci yadda kayan aiki na tudu ke aiki, za ka iya fara amfani da shi don yada shafukan yanar gizonku. Waɗannan su ne matakan da na ɗauka don ƙirƙirar shafin yanar gizon da aka fadi:

Muddin ka san fadin (kashi-kashi yana da kyau) na sassan layout naka, zaka iya amfani da kayan tasowa don saka su inda suke cikin shafin. Kuma abin da ke da kyau shi ne, ba dole ka damu ba game da tsarin akwatin na daban don Internet Explorer ko Firefox.