Ịghọta CSS Float

Iji CSS na-ese n'elu ala iji chepụta ihuenyo weebụ

Ihe CSS bụ ihe dị oké mkpa maka nhazi. Ọ na-enye gị ohere ịkwado atụmatụ ibe weebụ gị dịka ịchọrọ ka ha gosipụta-mana iji jiri ya ị ghaghị ịghọta otú o si arụ ọrụ.

N'okpuru ụdị akwụkwọ, CSS dị ka nke a:

.right {float: right; }

Nke a na-agwa nchọgharị na ihe niile na klas nke "aka nri" kwesịrị ịfe na nri.

Ị ga-ekenye ya dị ka nke a:

klas = "nri" />

Kedu ihe ị ga-eji ụgbọ mmiri CSS na-ese n'elu mmiri?

Ị pụghị ịwụgharị ọ bụla mmewere na ibe weebụ. Ị nwere ike na-ahụ ihe ngwugwu ngwugwu . Ndị a bụ ihe ndị na-ewepụta oghere nke ohere na ibe ahụ, dị ka ihe oyiyi (), paragraf (), nkewa (), na ndepụta ().

Ihe ndị ọzọ na-emetụta ederede, mana ịmepụta igbe dị na peeji nke a na-akpọ ihe ederede na enweghị ike ịfe. Ihe ndị a bụ ihe dịka oge (), nkwụsị akara (), mmesi ike siri ike (), ma ọ bụ ihe atụ ().

Ebee ka ha na-esi n'elu mmiri?

Ị nwere ike isegharị nri gaa n'aka nri ma ọ bụ n'aka ekpe. Ihe ọ bụla nke na-esote ihe a na-ese n'elu ga-agba gburugburu ihe omume dị n'elu n'akụkụ nke ọzọ.

Dịka ọmụmaatụ, ọ bụrụ na m na-ese onyinyo ya n'aka ekpe, ihe ederede ma ọ bụ ihe ndị ọzọ na-eso ya ga-agba ya gburugburu gaa n'aka nri. Ma ọ bụrụ na m na-ese onyinyo ya n'aka nri, ihe ọ bụla edere ma ọ bụ ihe ndị ọzọ na-eso ya ga-agba ya gburugburu n'aka ekpe. Ihe oyiyi a na-etinye na ngọngọ nke ederede na-enweghị ụdị ọgbọ ọ bụla a na-etinye na ya ga-egosipụta ma agbanyela ihe nchọgharị ahụ iji gosipụta ihe oyiyi.

Nke a na-abụkarị na akara mbụ nke na-esonụ ederede gosipụtara na ala nke onyinyo ahụ.

Olee Otú Ha Ga-esi Gbasaa?

Otu mmewere nke a na- efegharị ga-agafe aka ekpe ma ọ bụ aka nri nke ihe mmezi dị ka o nwere ike. Nke a na - eweta ọnọdụ dị iche iche dị iche iche dabere n'otú e si ede ederede gị.

Maka ihe atụ ndị a, m ga-esegharị obere obere ihe anọ dị n'aka ekpe:

Ọbụna ị nwere ike iji ndị na-ese ụgbọ mmiri ịmepụta ihe ngosi osisi gallery. Ị na-etinye npịpụta mkpịsị nke ọ bụla (ọ na-arụ ọrụ kachasị mma ma ọ bụrụ na ha niile bụ otu nha) na DIV na ihe ntinye na nkedo ihe ndị dị na akpa ahụ.

N'agbanyeghi otú window windo si dị, ihe ntinye aha ga-agbanye n'usoro.

Na-agbanye Iju Mmiri ahụ

Ozugbo ị mara otú e si enweta ihe iji megharịa, ọ dị mkpa ịmara otú ị ga-esi gbasaa. Ị na-agbapụ ụgbọ mmiri ahụ na CSS doro anya. I nwere ike ikpochapu ugbo ala, onu ogugu ma obu ma:

doro anya: n'aka ekpe;
doro anya: nri;
doro anya: ma;

Ihe ọ bụla ị na-edozi ihe onwunwe doro anya ga-apụta n'okpuru ihe mmewere nke na-agafe na ntụziaka ahụ. Dịka ọmụmaatụ, na nke a, amaghị paragraf abụọ mbụ nke ederede, ma nke atọ bụ.

Jiri egwu bara uru nke ihe dị iche iche dị na akwụkwọ gị iji nweta mmetụta dị iche iche.

Otu n'ime ihe ndị a na-adọrọ mmasị na-ese n'elu bụ usoro ihe oyiyi n'okpuru aka nri ma ọ bụ akaekpe na-esote paragraf nke ederede. Ọbụna ma ọ bụrụ na ederede ezughị ezu ka ịpịgharịa gafere onyinyo ahụ, ịnwere ike iji ihe doro anya na ihe oyiyi niile ahụ iji jide n'aka na ha na-apụta na kọlụm kama na-esote ihe oyiyi mbụ.

The HTML (megharịa paragraf a):


Ọ bụrụ na ị na-eme ka ọ bụrụ na ị na-eme ka ọ bụrụ na ị na-atụgharị uche na-eme ka oge na-adịghị anya. Cupidatat na-abụghị onye ọrụ, na-arụ ọrụ ma na-arụ ọrụ.

CSS (ịfụgharị ihe oyiyi ahụ n'aka ekpe):

img.float {float: aka ekpe;
doro anya: n'aka ekpe;
oke: 5px;
}

Na n'aka nri:

img.float {float: nri;
doro anya: nri;
oke: 5px;
}

Iji Ugbo ala maka Nhazi

Ozugbo ị ghọtara otú ihe onwunwe ahụ si arụ ọrụ, ị nwere ike ịmalite jiri ya iji dọọ ibe weebụ gị. Ndị a bụ ihe m na-eme iji mepụta ibe weebụ a na-ese n'elu:

Ogologo oge ị maara na obosara (percentages dị mma) nke ngalaba gị, ị nwere ike iji ihe nnyefe ahụ tinye ha ebe ha nọ na ibe. Na ihe dị mma bụ, ị gaghị echegbu onwe gị banyere ụdị igbe dị iche maka Internet Explorer ma ọ bụ Firefox.