Jak vytvořit sestavu tří sloupců v CSS

Rozložení CSS vyžaduje, abyste uvažovali o rozvržení svých webových stránek jako celku, a pak je odeberte a spojte je dohromady. Naučte se, jak vytvořit jednoduché uspořádání tří sloupců pomocí CSS.

01 ze dne 09

Nakreslete rozložení

J Kyrnin

Rozvržení můžete nakreslit na papíře nebo v grafickém programu . Pokud již máte na mysli nějaký drátový rámeček nebo ještě rozsáhlejší návrh, zjednodušte ho na základní krabice, které tvoří stránku. Tento návrh, který doprovází tento článek má tři sloupce v hlavní oblasti obsahu, stejně jako záhlaví a zápatí. Pokud se podíváte pozorněji, můžete vidět, že tři sloupce nejsou stejné v šířce.

Po rozložení rozložení můžete začít rozmýšlet o rozměrech. Tento návrh příkladu bude mít následující základní rozměry:

02 ze dne 09

Napište základní HTML / CSS a vytvořte element kontejneru

Protože tato stránka bude platným dokumentem HTML, spusťte prázdný kontejner HTML

Přidejte do základních stylů CSS nulu okrajů, okrajů a paddings . Zatímco existují další standardní styly CSS pro nové dokumenty, tyto styly jsou minimum, které potřebujete k získání čistého rozložení. Přidejte je do hlavy dokumentu: