Jak na to – rozložení ve dvou sloupcích
Naučte se, jak vytvořit 2sloupcovou mřížku rozvržení pomocí CSS.
Sloupec 1
Nějaký text..
Sloupec 2
Nějaký text..
Jak vytvořit rozložení se dvěma sloupci
Krok 1) Přidejte HTML:
Příklad
<div class="row">
<div class="column"></div>
<div
class="column"></div>
</div>
Krok 2) Přidejte CSS:
V tomto příkladu vytvoříme dva stejné sloupce:
Příklad plováku
.column {
float: left;
width: 50%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
Moderním způsobem vytváření dvou sloupců je použití CSS Flexbox . Není však podporován v Internet Exploreru 10 a starších verzích.
Příklad Flex
.row {
display: flex;
}
.column {
flex: 50%;
}
Je na vás, zda chcete k vytvoření dvousloupcového rozvržení použít plovoucí nebo flex. Pokud však potřebujete podporu pro IE10 a nižší, měli byste použít float.
Tip: Chcete-li se dozvědět více o modulu flexibilního rozvržení boxu, přečtěte si naši kapitolu CSS Flexbox .
V tomto příkladu vytvoříme dva nestejné sloupce:
Příklad
.column {
float: left;
}
.left {
width: 25%;
}
.right {
width: 75%;
}
V tomto příkladu vytvoříme responzivní dvousloupcové rozložení:
Příklad
/* Responsive layout - when the screen is less than 600px wide, make 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.