Vlastnosť CSS je veľmi dôležitá vlastnosť pre usporiadanie. Umožňuje vám umiestniť vaše návrhy webových stránok presne tak, ako ich chcete zobraziť - ale aby ste ich mohli používať, musíte pochopiť, ako to funguje.
V štýle šablón vlastnosť floating CSS vyzerá takto:
.right {float: right; }
To všetko hovorí prehliadaču, že všetko s triedou "vpravo" by malo byť posunuté napravo.
Priradiť by ste to takto:
class = "right" />
Čo môžete plávať s vlastníctvom flotily CSS?
Nemôžete plávať každý prvok na webovej stránke. Môžete plávať iba na úrovni bloku. Sú to prvky, ktoré zaberajú blok priestoru na stránke, napríklad obrázky (), odseky (), divízie () a zoznamy ().
Ostatné prvky, ktoré ovplyvňujú text, ale nevytvárajú na karte žiadne pole, sa nazývajú prvky v riadku a nemôžu byť preplávané. Sú to prvky ako span (), prerušenia riadkov (), silný dôraz () alebo kurzíva ().
Kde sa plávajú?
Môžete plávať prvky vpravo alebo vľavo. Akýkoľvek prvok, ktorý nasleduje po floatovanom prvku, bude prúdiť okolo floatovaného prvku na druhej strane.
Napríklad, ak plávam obrázok doľava, každý text alebo iné prvky, ktoré nasledujú, budú pretekať okolo neho doprava. A ak plávam obrázok napravo, každý text alebo iné prvky, ktoré nasledujú, budú pretekať doľava. Obrázok, ktorý je umiestnený do bloku textu bez použitia plavákového štýlu, zobrazí prehliadač nastavený na zobrazenie obrázkov. Toto je zvyčajne prvý riadok nasledujúceho textu zobrazený v spodnej časti obrázka.
Do akej miery budú plávať?
Prvok, ktorý bol vznášaný, sa bude pohybovať čo najďalej vľavo alebo vpravo od kontajnera. Výsledkom je niekoľko rôznych situácií, ktoré závisia od toho, ako je váš kód napísaný. Pre tieto príklady budem plávať malý DIV prvok vľavo:
- Ak floatovaný prvok nemá preddefinovanú šírku, zaberie toľko horizontálneho priestoru, aký je potrebný a dostupný, bez ohľadu na plavák. Poznámka: niektoré prehliadače sa pokúšajú umiestniť prvky vedľa pohyblivých prvkov, keď nie je definovaná šírka - zvyčajne dávajú neplatenému prvku len malý priestor. Takže by ste mali vždy definujte šírku na plávajúcich prvkoch.
- Ak element kontajnera je element HTML, floated
DIVbude sedieť na ľavom okraji stránky. - Ak je prvok kontajnera sám obsiahnutý niečím iným, plavidlo
DIVbude sedieť na ľavom okraji kontajnera. - Môžete hniezdiť plávajúce prvky a to môže viesť k tomu, že plavák skončí na prekvapujúcom mieste. Napríklad, tento plavák je vľavo floated
DIVvo vnútri pravej plavbyDIV. - Plávajúce prvky budú sedieť vedľa seba, ak je v kontajneri miesto. Napríklad tento kontajner má tri šírky 100 pixelov
DIVprvky sa vznášali v kontajneri so šírkou 400 pixlov.
Môžete dokonca použiť plaváky na vytvorenie rozloženia fotogalérie. Každú miniatúru dáte (to funguje najlepšie, keď sú všetky rovnaké veľkosti) v a DIV s titulkom a plavákom DIV prvky v kontajneri. Bez ohľadu na to, aké je šírka okna prehliadača, miniatúry sa vyrovnajú rovnomerne.
Vypnutie plaváka
Akonáhle viete, ako získať prvok na plávanie, je dôležité vedieť, ako vypnúť plavák. Vypnete plavák s vlastnosťami CSS clear. Môžete vymazať ľavé plaváky, pravé plaváky alebo obe:
jasné: vľavo;jasné: vpravo;jasné: obe;
Akýkoľvek prvok, pre ktorý ste nastavili jasnú vlastnosť pre, sa bude zobrazovať pod prvkom, ktorý sa pohybuje týmto smerom. Napríklad v tomto príklade nie sú prvé dva odseky textu vymazané, ale tretí je.
Hrajte s jasnou hodnotou rôznych prvkov vo vašich dokumentoch, aby ste získali rôzne efekty rozloženia. Jedným z najzaujímavejších plávajúcich usporiadaní je séria obrazov v pravom alebo ľavom stĺpci vedľa odsekov textu. Dokonca aj vtedy, ak text nie je dostatočne dlhý na to, aby sa posúval okolo obrázka, môžete ho použiť na všetkých obrázkoch, aby ste sa ubezpečili, že sa zobrazujú skôr v stĺpci než vedľa predchádzajúceho obrázka.
HTML (opakovať tento odsek):
Dôležitá je, aby sa nahradil dočasný príspevok vo výmere. Nespoločenský prezident, pracujúci a dravý magna aliqua.
CSS (na plávanie obrázkov doľava):
img.float {float: left; clear: left; rozpätie: 5px;}
A vpravo:
img.float {float: right; jasná: right; rozpätie: 5px;}
Použitie plôch pre rozloženie
Akonáhle pochopíte, ako plavák Vlastné práce môžete začať používať na rozloženie vašich webových stránok. Toto sú kroky, ktoré urobím na vytvorenie navštívenej webovej stránky:
- Navrhnite rozloženie (na papier alebo v grafickom nástroji alebo v mojej hlave).
- Určte, kde budú rozdelenia stránok.
- Určte šírky rôznych kontajnerov a prvkov v nich.
- Float všetko. Dokonca aj najvzdialenejší kontajnerový prvok je posunutý doľava, takže viem, kde to bude vo vzťahu k portu zobrazenia prehliadača.
Pokiaľ poznáte šírky (v percentách sú v poriadku) vašich rozložení, môžete použiť plavák majetok, aby ich tam, kde patria na stránku. A pekná vec je, že sa nemusíte starať toľko o to, že model boxu je iný pre Internet Explorer alebo Firefox.
