Použití funkce CSS Float Vlastnost pro návrh rozvržení webové stránky
Vlastnost CSS je velmi důležitá vlastnost pro uspořádání. Umožňuje vám umístit návrhy webových stránek přesně tak, jak si je přejete, aby se zobrazovaly, ale pro jejich použití musíte pochopit, jak to funguje.
V listu stylů vypadá vlastnost floating CSS takto:
.right {float: right; }}
To řekne prohlížeči, že všechno s třídou "vpravo" by mělo být spuštěno napravo.
Přiřadíte jej takto:
class = "right" />
Co můžete plavat s vlastností floating CSS?
Nemůžete plavat každý prvek na webové stránce. Můžete pouze pohybovat prvky na úrovni bloku . Jedná se o prvky, které na stránce zabírají blok prostoru, jako jsou obrázky (), odstavce (), divize () a seznamy ().
Další prvky, které ovlivňují text, ale nevytvářejí pole na stránce, se nazývají vložené prvky a nemohou být propuštěny. Jsou to prvky jako span (), řádkové zlomy (), silný důraz () nebo kurzíva ().
Kde plují?
Můžete posunout prvky vpravo nebo vlevo. Jakýkoliv prvek, který následuje po plovoucím prvku, bude proudit kolem plovoucího prvku na druhé straně.
Například, pokud budu plavat vlevo, jakýkoli text nebo jiné elementy, které následují, budou protékat kolem něj vpravo. A pokud budu plavat vpravo, jakýkoli text nebo další prvky, které následují, budou protékat doleva. Obrázek, který je umístěn v bloku textu bez jakéhokoli plaveného stylu, se zobrazí, ale prohlížeč je nastaven tak, aby zobrazoval obrázky.
Obvykle se zobrazí první řádek následujícího textu v dolní části obrázku.
Jak daleko budou plavat?
Prvek, který se pohyboval, se bude pohybovat co nejdále vlevo nebo vpravo od prvku kontejneru. Výsledkem je několik různých situací v závislosti na tom, jak je kód napsán.
Pro tyto příklady budu plavat malý element DIV nalevo:
- Pokud floatovaný prvek nemá předem definovanou šířku, bude to vyžadovat a bude k dispozici libovolný horizontální prostor, bez ohledu na plavec. Poznámka: Některé prohlížeče se pokoušejí umístit prvky vedle plovoucích prvků, když není definována šířka - většinou dávají neplaplému prvku jen malý prostor. Takže byste měli vždy definovat šířku na plovoucích prvcích.
- Je-li prvkem kontejneru element HTML, bude floated DIV sedět na levém okraji stránky.
- Je-li samotný kontejnerový element obsažen jiným předmětem, bude floated DIV sedět na levém okraji kontejneru.
- Můžete hnít plovoucí prvky, a to může mít za následek, že plovák skončí na překvapivém místě. Například tento float je levý float DIV uvnitř pravého plaveného DIV.
- Plovoucí prvky budou sedět vedle sebe, pokud bude v kontejneru místo. Například tento kontejner má tři DIV elementy o šířce 100 pixelů, které se vznášejí v kontejneru o šířce 400 pixelů.
Můžete dokonce použít plováky k vytvoření rozložení fotogalerie. Každou miniaturu dáte (to funguje nejlépe, pokud jsou všechny stejné velikosti) v DIV s popisem a plovoucí prvky DIV v kontejneru.
Bez ohledu na to, jak široké je okno prohlížeče, miniatury se budou rovnoměrně vyrovnat.
Vypnutí plováku
Jakmile budete vědět, jak získat prvek, který má plavat, je důležité vědět, jak vypnout plovák. Vypnete plovák pomocí vlastnosti CSS clear. Můžete vyčistit levé ploutve, pravé plavidla nebo obojí:
jasné: vlevo;
jasné: vpravo;
jasné: obě;
Jakýkoli prvek, který nastavíte vyčistit vlastnost pro, se zobrazí pod prvek, který je pohybován tímto směrem. Například v tomto příkladu nejsou první dva odstavce textu vymazány, ale třetí je.
Hrajte s jasnou hodnotou různých prvků v dokumentech, abyste získali různé efekty rozvržení.
Jedním z nejzajímavějších vznášených rozložení je řada snímků vlevo nebo vpravo vedle odstavců textu. Dokonce i když text není dostatečně dlouhý na to, aby se mohl posunout po obraze, můžete použít zaškrtnutí na všech obrázcích, abyste se ujistili, že se ve sloupci zobrazují spíše než vedle předchozího obrázku.
HTML (zopakujte tento odstavec):
Překročte svůj čas, aby se zabránilo dočasnému vyloučení. Použijte jiný prozíravý úředník a dolu magna aliqua.
CSS (pro plovoucí obrázky doleva):
img.float {float: left;
jasné: vlevo;
margin: 5px;
}}
A vpravo:
img.float {float: right;
jasné: vpravo;
margin: 5px;
}}
Používání plovoucích prvků pro rozvržení
Jakmile pochopíte, jak funguje vlastnost float, můžete ji začít používat pro rozvržení vašich webových stránek. Jedná se o kroky, které podniknu při vytváření floated webové stránky:
- Návrh rozvržení (na papíře nebo v grafickém nástroji nebo v mé hlavě).
- Určete, kde budou rozdělení stránek.
- Určete šířku jednotlivých kontejnerů a prvků v nich.
- Float vše. Dokonce i nejvzdálenější kontejnerový element je spuštěn doleva, takže vím, kde to bude ve vztahu k portu prohlížení prohlížeče.
Dokud znáte šířky (v procentech jsou v pořádku) vašich rozložení, můžete použít vlastnost float, abyste je uvedli tam, kde patříte na stránku. A hezká věc je, že se nemusíte starat tolik, kolik je model krabice odlišný pro Internet Explorer nebo Firefox.