Tento článek vysvětluje, jak vytvořit rozložení ve 3 sloupcích v CSS. Pokyny platí pro CSS3 a starší.

Nakreslete své rozložení

Rozložení můžete nakreslit na papír nebo do grafický program. Pokud již máte na mysli drátěný rám nebo ještě rozsáhlejší design, zjednodušte to na základní pole, která tvoří web. Tento design doprovázející tento článek má tři sloupce v hlavní oblasti obsahu a také záhlaví a zápatí. Pokud se podíváte pozorně, uvidíte, že tři sloupce nejsou stejné šířky.

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

• Ne více než 900 pixelů na šířku
• Žlab 20 px vlevo
• 10 px mezi sloupci a řádky
• Sloupce široké 250px, 300px a 300px
• Horní řada je vysoká 150 pixelů
• Dolní řádek je vysoký 100 pixelů

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

Protože tato stránka bude platná HTML dokument, začněte s prázdným kontejnerem HTML.

Přidejte do CSS základní styly vynulujte okraje, ohraničení a odsazení stránky. Zatímco existují i ​​jiné standardní styly CSS u nových dokumentů jsou tyto styly minimum, které potřebujete k čistému rozvržení. Přidejte je do záhlaví dokumentu.

Chcete-li začít stavět rozložení, vložte prvek kontejneru. Někdy se stane, že se kontejneru můžete později zbavit, ale u většiny rozvržení s pevnou šířkou má prvek kontejneru snazší správu napříč různými weby prohlížeče.

Vytvořte styl kontejneru

Kontejner definuje, jak široký bude obsah webové stránky, stejně jako jakékoli okraje kolem vnějšku a polstrování na vnitřní straně. U tohoto dokumentu je kontejner široký 870px s okapovým žlabem 20 pixelů vlevo. Žlab je nastaven s okrajovým stylem, ale výplň na kontejneru je vynulována, aby se zabránilo tomu, aby všechny prvky byly stejně široké jako kontejner.

Pokud dokument uložíte nyní, bude obtížné kontejner zobrazit, protože v něm není nic. Pokud přidáte zástupný text, budete moci prvek kontejneru vidět jasněji.

Pro nadpis použijte značku nadpisu

To, jak se rozhodnete stylovat řádek záhlaví, hodně závisí na tom, co v něm je. Pokud řádek záhlaví bude mít pouze logo a nadpis loga, pak pomocí značky nadpisu (

) dává větší smysl než použití a

. Nadpis můžete stylovat stejným způsobem, jako stylujete div, a vyhnete se zbytečným značkám.

HTML pro řádek záhlaví jde v horní části kontejneru a vypadá takto:

Poté, aby se na něm nastavily styly, byl dole přidán červený rámeček, abyste viděli, kde končí, okraje a výplň byly vynulovány, šířka nastavena na 100% a výška na 150 pixelů.

Nezapomeňte tento prvek floatovat pomocí float: left; vlastnictví. Klíčem k psaní rozvržení CSS je plavit vše, dokonce i věci, které mají stejnou šířku jako kontejner. Tímto způsobem vždy víte, kde budou prvky na stránce ležet.

A Volič potomků CSS aplikované styly pouze na prvky H1, které jsou uvnitř prvku #container.

Chcete-li získat tři sloupce, začněte vytvořením dvou sloupců

Když vytváříte rozložení se třemi sloupci pomocí CSS, musíte rozložení rozdělit do skupin po dvou. Takže u tohoto třísloupcového rozložení je prostřední a pravý sloupec seskupen a umístěn vedle levého sloupce ve dvousloupcovém rozložení kde levý sloupec je široký 250px a pravý sloupec je široký 610px (každý 300 pro dva sloupce plus 10px pro žlab mezi jim).

Sloupec vlevo je plovoucí vlevo, zatímco druhý plovoucí vpravo. Protože celková šířka obou sloupců je 860px, je mezi nimi 10px žlab.

Přidejte dva sloupce do širokého druhého sloupce

Chcete-li vytvořit tři sloupce, přidejte dva divy do širšího druhého sloupce, stejně jako jste v posledním kroku přidali 2 divy do sloupce kontejneru.

Protože tyto dvě krabice o šířce 300px jsou uvnitř krabice o šířce 610px, bude mezi nimi opět 10px žlab.

Přidejte do zápatí

Nyní, když je zbytek stránky stylizovaný, můžete přidat do zápatí. Použijte poslední div s ID „zápatí“ a přidejte obsah, abyste jej viděli. Můžete také přidat ohraničení nahoře, abyste věděli, kde začíná.

Přidejte své osobní styly a obsah

Nyní, když máte rozvržení hotové, můžete začít přidávat své vlastní osobní styly a obsah. Nezapomeňte, že hranice v záhlaví a zápatí byly přidány, aby se zobrazily oddíly rozložení, nikoli konkrétně pro návrh.