Gebruik die CSS-float Eiendom om webbladuitlegte te ontwerp
Die CSS-eiendom is 'n baie belangrike eiendom vir uitleg. Dit laat jou toe om jou webbladontwerpe te posisioneer presies soos wat jy wil hê dat hulle vertoon moet word, maar om dit te kan gebruik, moet jy verstaan hoe dit werk.
In 'n stylblad lyk die CSS-float-eiendom soos volg:
. regs (float: right; }
Dit vertel die leser dat alles met die klas van "regs" na regs gedryf moet word.
Jy sal dit só toewys:
klas = "reg" />
Wat kan jy dryf met die CSS float Eiendom?
Jy kan nie elke element op 'n webblad dryf nie. U kan slegs blokvlak elemente dryf. Dit is die elemente wat 'n blokkie spasie op die bladsy opneem, soos beelde (), paragrawe (), afdelings () en lyste ().
Ander elemente wat teks affekteer, maar nie 'n boks op die bladsy skep nie, word inline-elemente genoem en kan nie gedryf word nie. Dit is elemente soos span (), lynbreuke (), sterk klem () of kursief ().
Waar dryf hulle?
Jy kan elemente regs of links beweeg. Enige element wat die geswelde element volg, sal om die swaaielement aan die ander kant vloei.
Byvoorbeeld, as ek 'n prentjie na links beweeg, sal enige teks of ander elemente wat daarop volg, daarvandaan vloei. En as ek 'n beeld regs dryf, sal enige teks of ander elemente wat daarop volg, daarvandaan vloei. 'N Beeld wat in 'n teksblok geplaas word sonder dat 'n float-styl daaraan toegepas word, sal egter wys dat die blaaier ingestel is om prente te vertoon.
Dit is gewoonlik met die eerste reël van die volgende teks onderaan die prent.
Hoe ver sal hulle dryf?
'N Element wat gedryf is, sal so ver links of regs van die houerelement beweeg as dit kan. Dit lei tot verskillende situasies, afhangend van hoe u kode geskryf is.
Vir hierdie voorbeelde sal ek 'n klein DIV-element aan die linkerkant swaai:
- As die swaaielement nie 'n vooraf gedefinieerde breedte het nie, sal dit soveel horisontale spasie opneem soos benodig en beskikbaar, ongeag die vlotter. Let wel: sommige blaaiers poog om elemente langs swewende elemente te plaas wanneer die wydte nie gedefinieer word nie, gewoonlik gee die nie-gedrewe element slegs 'n klein hoeveelheid spasie. So moet jy altyd 'n wydte op swaaielemente definieer .
- As die houerelement die HTML-element is, sal die gedwonge DIV aan die linkerkant van die bladsy sit.
- As die houerelement self deur iets anders vervat is, sal die gedwonge DIV aan die linkerkant van die houer sit.
- Jy kan nagebootste elemente nes, en dit kan tot gevolg hê dat die vlot op 'n verrassende plek eindig. Byvoorbeeld, hierdie vlot is 'n linker-swaai DIV in 'n regs gedwonge DIV.
- Vlote elemente sal langs mekaar sit as daar ruimte in die houer is. Byvoorbeeld, hierdie houer het drie 100px wye DIV elemente in 'n 400px wye houer gedryf.
Jy kan selfs dryfkies gebruik om 'n foto gallery uitleg te skep. Jy sit elke duimnaelskets (dit werk die beste as hulle almal dieselfde grootte is) in 'n DIV met die onderskrif en die DIV-elemente in die houer dryf.
Maak nie saak hoe wyd die blaaier is nie, die miniatuurtjies sal eenvormig reël.
Skakel die Vlot af
Sodra jy weet hoe om 'n element te laat dryf, is dit belangrik om te weet hoe om die vlotter af te skakel. Jy skakel die vlot af met die CSS-skoon eiendom. Jy kan vlotte vlerkies, regtervlotte of albei skoonmaak:
duidelik: links;
duidelik: reg;
duidelik: albei;
Enige element waaraan jy die duidelike eiendom stel, sal onder 'n element verskyn wat in daardie rigting gedryf word. Byvoorbeeld, in hierdie voorbeeld word die eerste twee paragrawe van teks nie skoongemaak nie, maar die derde is.
Speel met die duidelike waarde van verskillende elemente in jou dokumente om verskillende uitleg effekte te kry.
Een van die interessantste swaai uitlegte is 'n reeks beelde in die regter- of linkerkolom langs paragrawe van die teks. Selfs as die teks nie lank genoeg is om oor die prent te blaai nie, kan jy die prente op alle prente gebruik om seker te maak dat dit in die kolom voorkom, eerder as langs die vorige prent.
Die HTML (herhaal hierdie paragraaf):
Duis aute irure dolor sed eiusmod tempor incididunt in reprehenderit in voluptate. Cupidatat non proident, uit die labore en dolore magna aliqua.
Die CSS (om die beelde aan die linkerkant te dryf):
img.float {float: left;
duidelik: links;
marge: 5px;
}
En aan die regterkant:
img.float {float: right;
duidelik: reg;
marge: 5px;
}
Gebruik Floats for Layout
Sodra jy verstaan hoe die float eiendom werk, kan jy dit gebruik om jou webblaaie uit te lê. Dit is die stappe wat ek neem om 'n swaai webblad te skep:
- Ontwerp die uitleg (op papier of in 'n grafiese instrument of in my kop).
- Bepaal waar die bladsyafdelings gaan wees.
- Bepaal die wydtes van die verskillende houers en die elemente binne hulle.
- Vloei alles. Selfs die buitenste houerelement word aan die linkerkant gedryf sodat ek weet waar dit sal wees in verhouding tot die blaaier se hawe.
So lank as wat jy weet die wydtes (persentasies is goed) van jou uitlegafdelings, kan jy die dryfgoed gebruik om hulle te plaas waar hulle op die bladsy hoort. En die mooi ding is, jy hoef nie soveel bekommerd te wees oor die boksmodel wat anders is vir Internet Explorer of Firefox nie.