Jak na to - Side-by-side stoly
Naučte se vytvářet tabulky vedle sebe pomocí CSS.
Jak umístit stoly vedle sebe
Jak vytvořit tabulky vedle sebe pomocí vlastnosti CSS float
:
Příklad
* {
box-sizing: border-box;
}
/* Create a two-column
layout */
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
Jak vytvořit tabulky vedle sebe pomocí vlastnosti CSS flex
:
Příklad
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
Poznámka: Flexbox není podporován v Internet Exploreru 10 a starších verzích. Je jen na vás, zda chcete použít plováky 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 .
Přidejte odezvu
Výše uvedený příklad nebude vypadat dobře na mobilním zařízení, protože dva sloupce zaberou příliš mnoho místa na stránce. Chcete-li vytvořit responzivní tabulku, která by měla přejít z rozvržení se dvěma sloupci na rozvržení s plnou šířkou na mobilních zařízeních, přidejte následující dotazy na média:
Příklad
/* Responsive layout - makes the two columns stack on top of each other
instead of next to each other on screens that are smaller than 600 px */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Tip: Další informace o stylování tabulek naleznete v našem výukovém programu pro tabulky CSS .
Tip: Další informace o vlastnosti float naleznete v našem výukovém programu CSS Float .
Tip: Další informace o vlastnosti flex naleznete v našem výukovém programu CSS Flexbox .