Ábhar
Meán oíche atá ann, agus an ceann sin div tá cuma cófra bréagán linbh ar do shuíomh fós. Is praiseach casta na heilimintí go léir, agus gach uair a imríonn tú le CSS taispeáint maoin, déanann siad iad féin a athshocrú ina ngiotán iomlán difriúil.
Má tá tú cosúil liomsa, is dócha go réiteoidh tú é seo trí mhúchadh faoi d'anáil agus a bheith níos ionsaithí i gcónaí le do mhéarchlár. Agus cé gur oibrigh an straitéis sin dom roimhe seo, rinne mé iarracht le déanaí bealach níos fearr a fháil chun an taispeáint maoin.
Casadh sé amach ar na rudaí bunúsacha de taispeáint i bhfad níos simplí ná mar a cheap mé ar dtús. Déanta na fírinne, úsáideann siad na prionsabail chéanna le pacáil suitcase. Táim chun clúdach a dhéanamh taispeáint: bloc, bloc inlíne agus i líne. Má tá suitcase socraithe agat ar bhealach ordúil roimhe seo, feicfidh tú an comhthreomhar. Más tusa an cineál duine a reitheann do chuid éadaigh go léir ar bhealach neamhchúiseach - bhuel, níl ach an oiread sin is féidir liom a dhéanamh duitse.
Beidh trí chineál éadaí inár gculaith:
- Delicates, cosúil le léine collared
- T-léinte is féidir a rolladh suas
- Stocaí nó fo-éadaí is féidir a líonadh isteach i mbearnaí
Le haghaidh tagartha, dá ndéanfaimis an culaith a mhúnlú i HTML, bheadh an chuma air:
div class = 'suitcase'> div class = 'íogair'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'stocaí'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
Na míreanna íogair ar a bharr
Taispeáin: bloc an réamhshocrú d’fhormhór na n-eilimintí HTML. Ciallaíonn sé sin go n-áitíonn an eilimint an spás cothrománach iomlán laistigh dá choimeádán div. Má tá sé in aice le heilimintí siblín eile, cuirfidh sé tús le líne nua, agus ní ligfidh sé d’eilimintí eile ar a líne. Tá sé cosúil leis na míreanna mín a chuireann tú ag barr do mhála taistil. Earraí mín nó cliste iad seo mar léinte colláis. Níl tú ag iarraidh go n-éireoidh siad roic, mar sin déanann tú cinnte nach mbrúitear suas iad i gcoinne píosaí éadaigh eile.
Tugann sé seo suas ceann de na codanna is deacra de taispeáint: bloc. Tabhair faoi deara an chaoi nach n-áitíonn an léine colláis leithead iomlán an mhála taistil? Ní chiallaíonn sé sin go léimfidh earraí eile suas go dtí a leibhéal. Abair go bhfuil an léine seo 60 faoin gcéad de leithead an mhála taistil; chuirfeadh sé bac fós ar eilimintí eile óna gceangal ar an leibhéal is airde.
Sin é an fáth go bhfuil teorainn oráiste sa phictiúr. A. taispeáint: bloc cuirfidh eilimint corrlach timpeall uirthi go huathoibríoch mura n-áitíonn sí an spás cothrománach iomlán.
T-léinte pacáilte go néata
Is dócha go bhfuil an chuid is mó de do mhála taistil lán den chuid eile d’éadaí le haghaidh do thurais. Ar mhaithe le simplíocht, táimid chun é seo a ghearradh síos go díreach T-léinte. Tá díospóireacht mhór ar an idirlíon i dtaobh an bhfuil fillte nó rolladh níos éifeachtaí. Is duine fillte mé.
Ar aon chaoi, d’fhonn na míreanna is mó a fheistiú, déanann tú do T-léinte a chur taobh le taobh. Is é seo go díreach taispeáint: inlíne-bloc i gceist le haghaidh. Is féidir leis na heilimintí seo suí in aice lena chéile ar an líne chéanna, chomh maith le taobh leo taispeáint: inlíne eilimintí.
Murab ionann agus taispeáint: inlíne eilimintí, an bloc inlíne bogfaidh an eilimint go dtí an chéad líne eile mura n-oirfidh sí ina bhfuil div taobh leis an gceann eile bloc inlíne eilimintí. D’fhonn doirteadh T-léine a dhoirteadh ar an gcéad tsraith eile, bheadh ort é a ghearradh ina dhá leath agus an leath eile a úsáid chun ró nua a thosú. Bloc inlíne ní cheadaítear eilimintí a roinnt ina dhá leath mura bhfeileann siad ar líne.
Na stocaí a líonann na bearnaí
Seiceáil siar ar an HTML bunaidh agus tabharfaidh tú faoi deara go bhfuil stocaí amháin ann div> idir na hocht T-léine. Ach féach ar amharc cothrománach an mhála taistil ar dheis. Má tá stocaí amháin ann div>, conas is féidir leis deireadh a chur leis an tsraith lár agus tús a chur leis an tsraith bhun? Is é seo an aidhm atá ag taispeáint: inlíne!
An i líne doirteofar an eilimint go dtí an chéad líne eile más mó í ná leithead an div (ar an mbealach seo tá sé difriúil ó bloc inlíne nó bloc). Ó tharla ár stocaí div lán le stocaí atá líonta go haphazardly i mbearnaí, is féidir leis tosú go héasca an bhearna a líonadh ar thaobh na láimhe deise den tsraith lár agus doirteadh thairis chun tús a chur leis an tsraith bhun.
Ní chaithfear stocaí ar bith a ghearradh ina dhá leath chun go dtarlóidh sé seo. Sin é an fáth gur féidir leo a bheith i líne, cé nach féidir ach T-léinte a bheith bloc inlíne. Mura dtógfadh na T-léinte ar an tsraith lár ach 60 faoin gcéad den leithead, na stocaí div> bhogfadh sé suas chun an spás iomlán a líonadh ar an gcuid eile den tsraith.
Slán leat
Is é seo an CSS deiridh dár gculaith:
.delicate {taispeáint: bloc; leithead: 60%; } .tshirt {taispeáint: inlíne-bloc; leithead: 20%; } .socks {taispeáint: inlíne; }
Seo cúpla cás malartach chun na húsáidí éagsúla taispeána a léiriú. Dá mbeadh na delicates ar an mbarr taispeáint: inlíne-bloc, d’oirfeadh siad i gceart taobh leis na T-léinte. Bhogfadh cuid de na T-léinte suas go dtí an líne barr, agus athródh an chuid eile dá réir. Ní bheadh aon mhaolán compordach ar thaobh na láimhe clé agus ar dheis den léine colláis.
Dá mbeadh gach T-léine bloc taispeána, bheadh carn ollmhór T-léinte agat ar bharr a chéile, ceann in aghaidh an líne. Dá mbeadh na stocaí taispeáint: inlíne-bloc, shuífidís go léir ar an tsraith bhun seachas sreabhadh idir an dá shraith. Dhéanfaí roinnt T-léinte a bhrú ar shraith eile, ag cruthú ceathrú líne. Bheadh bearna ar thaobh na láimhe deise den tsraith lár de T-léinte.
Leis an modh atá leagtha amach agam anseo, tá culaith pacáilte néata againn a bhaineann an úsáid is fearr as an spás atá ar fáil.
Bhí an t-alt seo le feiceáil ar dtús i iris ghlan eisiúint 289; é a cheannach anseo!
