Jak na to – rozložení ve čtyřech sloupcích
Naučte se, jak vytvořit mřížku rozvržení se 4 sloupci pomocí CSS.
Jak vytvořit rozložení se čtyřmi sloupci
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í čtyř sloupců:
Příklad
.column {
float: left;
width: 25%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
V tomto příkladu vytvoříme responzivní čtyřsloupcové rozložení:
Příklad
/* Responsive layout - when the screen is less than 600px wide, make the
three
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.