Tip: V závislosti na tom, proč chcete přerušit div, můžete také zvážit použití značky, která je prvkem na úrovni řádků, a pokud se nezmění její výchozí chování, nepřekročí se na další řádek.
Poznámka: Aby byly tyto příklady jednodušší a srozumitelnější pro všechny typy uživatelů počítačů, používáme atribut stylu v div. Pokud chcete použít některý z těchto příkladů na více stránkách, doporučujeme vytvořit soubor CSS s uloženým stylem s nastavením stylu v souboru.
V našich příkladech níže ukážeme divs jako různé barvy, které nám pomohou ilustrovat, jak velká vzdálenost je div obsazena a kde na obrazovce je div umístěn.
Výchozí chování
Níže je uveden příklad výchozího chování div elementu bloku Div, který zabírá první řádek jeho elementu, za nímž následuje druhý Div dva .
Div jeden
Div dva
Div jeden Div dva
I kdybyste zmenšili velikost Div, aby se vytvořil prostor pro druhý div, protože jsou prvky bloku, měli byste zůstat s prostorem vedle Div jeden a Div dva pod Div jeden . Chcete-li div přesunout na další řádek, musí oba div mít nastavení zobrazení inline bloku, jak je uvedeno níže.
Div jeden
Div dva
Div jeden Div dva
Níže je několik různých příkladů tří sloupců div. Za prvé, pod třemi sloupci div následuje stejný nápad jako výše uvedené příklady s výjimkou, že přidává div.
Div jeden
Div dva
Div tři
Div jeden Div dva Div tři
Samozřejmě, pokud chcete, aby divs zabíral 100% obsahujícího prvku, dostane trochu složitější. Níže je uveden příklad, jak můžete vytvořit tři div vedle sebe, které zabírají 100% prvku. V níže uvedeném příkladu místo toho, abychom udrželi všechny div na stejném řádku pomocí inline bloku, jsme plovoucí levý a pravý div.
Div jeden
Div tři
Div dva
Div One DIV THREE Div Two
Tip: Ačkoliv výše uvedený příklad sloupce tří div je citlivý na další přizpůsobení, jako je skrytí Div tři a nastavení šířky lze také přidat do stylu.