Kuelewa mali ya wazi ya CSS

Mali ya CSS ya wazi imekuwa sehemu ya CSS tangu CSS1. Inakuwezesha kutaja mambo gani yanaweza kuelea kando ya kipengele kilichopwa na kwa upande gani. Mali ya wazi ina maadili tano iwezekanavyo:

Jinsi ya kutumia Mali ya wazi ya CSS

Njia ya kawaida ya kutumia mali ya wazi ni baada ya kutumia mali ya kuelea kwenye kipengele. Kwa mfano:

Nakala karibu na picha yangu.

Nakala iliyo chini ya picha yangu.

Vipengele vyote vifunguo vya kufungua: hakuna; , hivyo kama hutaki vipengele vingine kuelea kando ya kitu, lazima ubale mtindo wa wazi.

Unapofuta kusafisha, unafanana na wazi yako kuelea. Kwa hiyo ikiwa umeelezea kipengele upande wa kushoto, basi unapaswa kusafisha upande wa kushoto. Kipengee chako kilichochombwa kitaendelea kuelea, lakini kipengele kilichochafuliwa na kila kitu baada ya kuonekana chini yake kwenye ukurasa wa wavuti.

Ikiwa una vipengele vinavyoelekezwa kwa kulia na kushoto, unaweza kufuta upande mmoja tu au unaweza kufungua wote wawili.

Kutumia wazi katika Layouts

Njia ya kawaida zaidi wabunifu wengi hutumia mali ya wazi ni katika mpangilio wa vipengele vya ukurasa . Huenda ukawa na picha inayozunguka ndani ya kichwa cha maandiko na unataka kifungu kinachofuata ili kuanza chini ya picha, au unaweza kuwa na safu nzima ya maandishi ambayo unataka kuelea karibu na kundi lingine la maandishi, na nakala fulani inayoonekana chini.

Hapa ni HTML ya mpangilio katika fomu hii.

Ina chombo kimoja cha div kinachoshikilia mwingine ambacho kinaelekezwa upande wa kushoto.



Mgawanyiko mfupi unaozunguka



Yaliyomo ndani ya div ya chombo ambacho kitakuwa cha kulia cha div iliyoelekezwa.

Hii itafanya kazi vizuri, na div fupi iliyopo kwa upande wa kushoto wa yaliyomo ya div kuu.

Unaweza kufungua maandishi karibu na sanduku lililozunguka kwa kuongeza tu lebo ambako unataka kuanza kuandika chini ya sanduku lililozunguka.

Lakini shida inakuja wakati sanduku linalozunguka ni mrefu zaidi kuliko yaliyomo karibu nayo. Kisha, kama unavyoweza kuona, rangi ya nyuma ya sanduku kuu haifanyiki chini chini ya sanduku lililopandishwa.

Kwa bahati, kuna njia rahisi ya kurekebisha hili: mali. Kwa kuweka sanduku kuu la kufurika: auto; rangi ya nyuma itabaki kando ya sanduku la muda mrefu iliyo chini, kama inavyoonekana katika mfano huu .