Použitie funkcie CSS float Vlastnosť na návrh rozloženia webovej stránky
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ý element DIV doľava:
- 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 vždy by ste mali definovať šírku na floated elementoch.
- Ak element kontajnera je prvkom HTML, pohybovaná DIV sa bude nachádzať na ľavom okraji stránky.
- Ak je samotný kontajnerový element obsiahnutý niečím iným, plavák DIV bude 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 ľavotočivý DIV vo vnútri pravého plaveného DIV.
- Plávajúce prvky budú sedieť vedľa seba, ak je v kontajneri miesto. Napríklad tento kontajner má tri elementy DIV s rozmermi 100px, ktoré sa vznášajú v kontajneri širokého 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 DIV s titulkom a float prvky DIV 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
Keď pochopíte, ako funguje vlastnosť float, môžete ju 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 sekcií rozloženia, môžete použiť vlastnosť float a dať 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.