Jak na to – Smíšené rozvržení sloupců
Naučte se, jak vytvořit smíšenou mřížku rozvržení sloupců pomocí CSS.
Přečtěte si, jak vytvořit responzivní rozvržení sloupců, které se liší mezi 4 sloupci, 2 sloupci a sloupci s plnou šířkou v závislosti na šířce obrazovky.
Změňte velikost okna prohlížeče, abyste viděli responzivní efekt:
Jak vytvořit rozložení smíšeného sloupce
Krok 1) Přidejte HTML:
Příklad
<div class="row">
<div class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
</div>
Krok 2) Přidejte CSS:
V tomto příkladu vytvoříme rozložení se čtyřmi sloupci, které se na obrazovkách o šířce menší než 900 pixelů převede na dva sloupce. Na obrazovkách, které jsou menší než 600 pixelů, se však sloupce budou skládat na sebe, místo aby vedle sebe plovouly.
Příklad
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* Clear floats */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes a two column-layout
instead of four columns */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns
stack on top of each other instead of next to each other */
@media
screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Tip: Chcete -li se dozvědět více o rozložení webových stránek , přejděte do našeho výukového programu pro rozložení webových stránek CSS .
Tip: Chcete -li se dozvědět více o responzivním webovém designu a mřížkách , přejděte do našeho výukového programu CSS responzivního webového designu.