Ag baint úsáide as an Maoin CSS snámhphointe chun Leaganacha Leathanach Gréasáin Deartha
Is maoin an-tábhachtach é maoin CSS don leagan amach. Ligeann sé duit do dhearaí leathanach gréasáin a shuí go díreach mar is mian leat iad a thaispeáint - ach d'fhonn é a úsáid caithfidh tú tuiscint a fháil ar conas a oibríonn sé.
I mbileog stíl, tá an chuma seo ag an maoin snámhphointe CSS:
.right {snámhphointe: ceart; }
Insíonn sé seo don bhrabhsálaí gur chóir go mbeadh gach rud leis an rang "ceart" flóthaithe ar dheis.
Bheadh tú mar seo a shannadh:
rang = "ceart" />
Cad is féidir leat Snámh le Maoin Snámhphointe CSS?
Ní féidir leat gach gné a shnámháil ar leathanach gréasáin. Ní féidir leat ach eilimintí blocleibhéil a shnámháil. Seo iad na heilimintí a ghlacann le bloc spáis ar an leathanach, cosúil le híomhánna (), míreanna (), rannáin (), agus liostaí ().
Tugtar eilimintí inlíne ar eilimintí eile a théann i bhfeidhm ar théacs, ach ní chruthaíonn siad bosca ar an leathanach agus ní féidir iad a bheith flóite. Is gnéithe iad seo cosúil le réimse (), sosanna líne (), béim láidir (), nó iodálach ().
Cá bhfuil siad snámhphointe?
Is féidir leat eilimintí snámhphointe ar dheis nó ar chlé. Sreabhadh ar aon eilimint a leanann an eilimint fliuch timpeall an eilimint flóchta ar an taobh eile.
Mar shampla, má snámhóidh mé íomhá ar chlé, beidh aon téacs nó eilimintí eile ina dhiaidh sin sreabhadh timpeall air ar dheis. Agus má snámhóidh mé íomhá ar dheis, sreabhadh aon téacs nó eilimintí eile ina dhiaidh sin timpeall air ar chlé. Taispeánfar íomhá a chuirtear i bploc téacs gan aon stíl snámhphointe a chuirfear i bhfeidhm air, áfach, tá an bhrabhsálaí leagtha chun íomhánna a thaispeáint.
De ghnáth is é seo an chéad líne den téacs seo a leanas a thaispeántar ag bun na híomhá.
Cé chomh fada a bheidh siad ag snámhphointe?
Déanfaidh eilimint atá flóthaithe bogadh chomh fada ar chlé nó ar dheis an eilimintí coimeádáin mar is féidir. Tá sé seo mar thoradh ar roinnt cásanna difriúla ag brath ar an gcaoi a bhfuil do chód scríofa.
I gcás na samplaí seo, beidh mé ag gné DIV beag ar an taobh clé:
- Mura bhfuil leithead réamhshainithe ag an eilimint fliuchta, cuirfidh sé suas an spás cothrománach i bhfad de réir mar is gá agus ar fáil, beag beann ar an snámhphointe. Tabhair faoi deara: déanann roinnt brabhsálaithe iarracht eilimintí a chur in aice le heilimintí snámha nuair nach bhfuil an leithead sainmhínithe - de ghnáth ní thugann ach méid beag spás don eilimint neamh-flátáilte. Mar sin, ba cheart duit i gcónaí leithead a shainiú ar eilimintí snámhaithe.
- Más é an ghné coimeádán an eilimint HTML, suífidh an DIV flóite ar imeall clé an leathanaigh.
- Más rud é go bhfuil an ghné coimeádán féin ag rud éigin eile, suífidh an DIV snámh ar imeall clé an choimeádáin.
- Is féidir leat a n-eilimintí snámhaithe a neadú, agus is féidir leis an snámhphointe seo a bheith mar thoradh ar áit iontas. Mar shampla, tá an snámhphointe seo ar DIV ar snámh ar chlé taobh istigh de DIV ceart flátáilte.
- Suífidh gnéithe snámha in aice lena chéile má tá seomra sa choimeádán. Mar shampla, tá trí eilimintí DIV 100px ar fud an coimeádán seo atá snámh i gcoimeádán 400px leathan.
Is féidir leat flótaí a úsáid fiú chun leagan amach gailearaí grianghraf a chruthú. Cuireann tú gach mionnailán (oibríonn sé is fearr nuair a bhíonn an méid céanna acu) i DIV leis an gceannteideal agus snámhphointe na heilimintí DIV sa choimeádán.
Is cuma cé chomh leathan is atá an fhuinneog brabhsálaí, leanfaidh na mionsamhlacha suas go haonfhoirmeach.
Ag dul as an snámhphointe
Nuair a bheidh a fhios agat conas eilimint a fháil chun snámhphointe, tá sé tábhachtach go mbeadh a fhios agat conas an snámhphointe a mhúchadh. Laghdaíonn tú an snámhphointe le maoin shoiléir CSS. Is féidir leat snámháin chlé, snámhphointe ceart nó an dá cheann a ghlanadh:
soiléir: clé;
soiléir: ceart;
soiléir: araon;
Beidh aon ghné a shocraíonn tú an mhaoin shoiléir le feiceáil faoi ghné atá flóthaithe ag an treo sin. Mar shampla, sa sampla seo níl an chéad dá mhír de théacs glan, ach is é an tríú ceann.
Seinn le luach soiléir na n-eilimintí éagsúla i do dhoiciméid chun éifeachtaí leagan amach éagsúla a fháil.
Ceann de na leaganacha snámha is suimiúla ná sraith íomhánna atá suite ar an gcolún ceart nó ar chlé in aice le míreanna téacs. Fiú mura bhfuil an téacs fada go leor chun an íomhá a scrollnú, is féidir leat na híomhánna a úsáid go soiléir chun a chinntiú go bhfuil siad sa cholún seachas in aice leis an íomhá roimhe seo.
An HTML (féach an mhír seo):
Is féidir go gcuirfeadh an t-airgead ar fad ar an gcéanna agus go dtiocfaidh sé chun cinn agus é a chur i bhfeidhm. Cupidatat neamh-proidentach, a bheith ag obair agus go leor mórán.
An CSS (chun na híomhánna a snámháil ar an taobh clé):
img.float {snámhphointe: chlé;
soiléir: clé;
imeall: 5px;
}
Agus ar dheis:
img.float {snámhphointe: ceart;
soiléir: ceart;
imeall: 5px;
}
Ag baint úsáide as Floats do Leagan Amach
Nuair a thuigeann tú conas a oibríonn an mhaoin snámhphointe, is féidir leat tosú ag baint úsáide as do leathanaigh ghréasáin a leagan amach. Seo iad na céimeanna a ghlacann mé chun leathanach gréasáin flátáilte a chruthú:
- Dearadh an leagan amach (ar pháipéar nó in uirlis grafaicí nó i mo cheann).
- Déan cinneadh a dhéanamh i gcás ina mbeidh na ranna leathanach ar siúl.
- Socraigh leithead na gcoimeádán éagsúla agus na heilimintí laistigh díobh.
- Gach rud snámh. Fiú amháin an eilimint coimeádán is forimeallaí atá flátáilte ar an taobh clé ionas go mbeidh a fhios agam cá háit a bheidh sé i ndáil le calafort féachana an bhrabhsálaí.
Chomh fada agus a fhios agat go bhfuil na leithead (na céatadáin fíneáil) de do chuid leagan amach, is féidir leat an mhaoin snámhphointe a úsáid chun iad a chur i gcás ina mbaineann siad ar an leathanach. Agus is é an rud is deas, ní gá duit a bheith buartha mar gheall ar an tsamhail bosca atá difriúil le haghaidh Internet Explorer nó Firefox.