Tuigsinn CSS Float

A 'cleachdadh seilbh CSS a' seòladh gu Dealbhaidhean Duilleagan Lìn

Tha seilbh CSS na seilbh fìor chudromach airson an cruth. Tha e a 'toirt cothrom dhut do dhealbhan duilleag lìn a shuidheachadh dìreach mar a tha thu airson iad a thaisbeanadh - ach airson a chleachdadh feumaidh tu tuigsinn mar a tha e ag obair.

Ann an duilleag stoidhle, tha an t-seilbh snasail CSS coltach ri seo:

.right {flùraichean: deas; }

Tha seo ag innse don bhrobhsair gum bu chòir a h-uile càil leis a 'chlas "ceart" a bhith air a ghluasad chun na làimh dheis.

Dhèanadh tu e mar seo:

class = "ceart" />

Dè as urrainn dhut a sholarachadh leis an t-seilbh air bhog CSS?

Chan urrainn dhut a h-uile eileamaid fhlùraichean air duilleag-lìn. Chan urrainn dhut ach eileamaidean àrd-ìre a shìoladh. Is iad seo na h-eileamaidean a tha a 'toirt bloc de fhànais air an duilleig, mar ìomhaighean (), paragrafan (), roinnean (), agus liostaichean ().

Tha eileamaidean eile a tha a 'toirt buaidh air teacsa, ach chan eil iad a' cruthachadh bogsa air an duilleig air an ainmeachadh mar eileamaidean in-loidhne agus chan urrainnear a bhith air an gluasad. Tha iad sin nan eileamaidean mar span (), breaks loidhne (), cuideam làidir (), no clò eadailteach ().

Càit am bi iad fliuch?

Faodaidh tu rudan a shnàmh air an làimh dheis no air an làimh chlì. Bidh eileamaid sam bith a tha a 'leantainn na h-eileamaid fliuch a' sruthadh timcheall an eileamaid flùch air an taobh eile.

Mar eisimpleir, ma shèid mi dealbh air an taobh chlì, bidh teacsa sam bith no eileamaidean eile a tha ga leantainn a 'sruthadh timcheall air an làimh dheis. Agus ma shnàmhaicheas mi dealbh air an taobh dheas, teacsa sam bith no eileamaidean eile a tha ga leantainn a 'sruthadh timcheall air an taobh chlì. Bidh ìomhaigh a thèid a chur ann am bloc teacsa gun stoidhle sam bith a thèid a chur ris a sheallas a 'nochdadh ged a tha am brabhsair air a shuidheachadh gus ìomhaighean a thaisbeanadh.

Mar as trice tha seo leis a 'chiad loidhne de bhith a' leantainn an teacsa a thaisbeanadh aig bonn na h-ìomhaigh.

Ciamar a bhios iad fliuch?

Gluaisidh eileamaid a chaidh a ghluasad cho fada air taobh clì no deas an eileamaid soitheach. Tha seo a 'toirt a-steach grunn shuidheachaidhean eadar-dhealaichte a rèir mar a tha do chòd sgrìobhte.

Airson na h-eisimpleirean seo, bidh mi a 'fleòdradh eilim beag DIV air an làimh chlì:

Faodaidh tu fiù 's glainneachan a chleachdadh gus cruth gailearaidh dhealbhan a chruthachadh. Bidh thu a 'cur a h-uile minnail (tha e ag obrachadh as fheàrr nuair a tha iad uile an aon mheud) ann an DIV leis a' cheann-sgrìobhaidh agus bidh iad a 'seòladh na h-eileamaidean DIV anns a' ghobhar.

Chan eil e gu diofar dè cho farsaing 's a tha uinneag a' bhrabhsair, bidh na h-ìomhaigheagan a 'sìneadh gu h-èideadh.

A 'tionndadh air falbh bhon fhlùraichean

Aon uair 's gu bheil fios agad ciamar a gheibh thu eileamaid a' seòladh, tha e cudromach fios a bhith agad ciamar a chuireas tu an t-sruth air falbh. Bidh thu a 'tionndadh an t-sruth-làimhe le seilbh soilleir CSS. Faodaidh tu glainneachan clì, boglaich cheart no an dà chuid a chlò-bhualadh:

soilleir: clì;
soilleir: ceart;
soilleir: an dà chuid;

Bidh eileamaid sam bith a shuidhicheas tu an togalach soilleir airson nochdadh taobh a-staigh eileamaid a tha a 'gluasad air an taobh sin. Mar eisimpleir, san eisimpleir seo chan eil a 'chiad dà pharagraf teacsa air an glanadh, ach an treas fear.

Cluich le luach soilleir nan eileamaidean eadar-dhealaichte anns na sgrìobhainnean agad gus buaidh cruth eadar-dhealaichte fhaighinn.

Is e aon de na h-ìomhaighean flùraichte as inntinniche sreath de dh 'ìomhaighean sìos an colbh deas no clì ri taobh paragrafan teacsa. Fiù mura h-eil an teacsa fada gu leòr airson a dhol seachad air an ìomhaigh, faodaidh tu an cleachdadh gu soilleir air na h-ìomhaighean gu lèir gus dèanamh cinnteach gu bheil iad a 'nochdadh sa cholbh an àite ris an ìomhaigh roimhe.

An HTML (a-rithist am paragraf seo):


Duis aute irure dolor sed do eiusmod tempor a 'gabhail a-steach a bhith ag ath-sgrùdadh ann an toileachas. Cupidatat neo-fhoirmeil, mar obair agus duilgheadas mòr.

An CSS (airson na h-ìomhaighean a ghluasad gu clì):

img.float {flùr: clì;
soilleir: clì;
iomall: 5px;
}

Agus air an làimh dheis:

img.float {flùr: deas;
soilleir: ceart;
iomall: 5px;
}

A 'cleachdadh Floats airson Layout

Aon uair 's gu bheil thu a' tuigsinn mar a tha an t-ionad flùraichean ag obair, faodaidh tu tòiseachadh air a chleachdadh gus na duilleagan lìn agad a chur sìos. Is iad seo na ceumannan a tha mi a 'toirt airson duilleag-lìn flùrach a chruthachadh:

Cho fad 's gu bheil fios agad gu bheil an leud (àireamhan sa cheud) de na h-earrannan de dhealbhadh agad, faodaidh tu an t-seilbh a tha a' gluasad a-mach gus an cuir iad far a bheil iad air an duilleig. Agus is e an rud math, chan fheum thu dragh a thoirt uiread de mhodal a 'bhogsa a tha eadar-dhealaichte airson Internet Explorer no Firefox.