Div bloky jsou jedním ze základních prvků webové stránky a někdy je potřeba přidat posouvání pro obsah těchto bloků. Často je to nutné, když se obsah uvnitř div bloku nevejde na stránku a musí být skrolován. V tomto článku se podíváme na podrobný návod, jak vytvořit div rolovací blok.
Chcete-li vytvořit div rolovací jednotky, musíte použít vlastnost "overflow"CSS. Tato vlastnost umožňuje nastavit typ posouvání pro obsah bloku. Chcete-li vytvořit div rolovací blok, Nastavte styl "overflow: auto;" nebo " overflow: scroll;"pro správný div element. Obě tyto hodnoty vlastnosti vytvoří posouvání, ale jsou mezi nimi určité rozdíly. Vlastnost "auto" vytvoří posouvání pouze tehdy, pokud se obsah nevejde do bloku. Vlastnost "scroll" vždy vytvoří posouvání, ať už je obsah vložen do bloku nebo ne.
Chcete-li tedy Vytvořit div rolovací blok, použijte následující CSS styl:
border: 1px solid #ccc;
Ve výše uvedeném příkladu vytvoříme div blok s šířkou 300px, výškou 200px a použijeme styly pro rám, odsazení, a pozadí. Zde je důležitý "overflow: auto;", který vytváří posouvání obsahu bloku.
Nyní pro použití tohoto stylu jednoduše přidejte třídu "scrollable-div"k požadovanému div prvku:
Obsah rolovacího bloku.
Váš div blok bude mít nyní posouvání, pokud jeho obsah přesahuje danou velikost.
Jak vytvořím div rolovací blok?
K vytvoření div rolovacího bloku budete muset použít CSS styly a HTML kód. Zde je návod krok za krokem:
| Krok 1: | Přidejte následující HTML kód pro vytvoření div bloku: |
| Krok 2: | Pomocí CSS styly určete velikosti a vzhled vašeho div bloku: |
| Krok 3: | Přidejte konkrétní CSS styly pro vytvoření posouvání uvnitř vašeho div bloku: |
Výsledkem je, že vytvoříte div rolovací blok, který vám umožní zobrazit obsah, pokud překročí velikost bloku.
Příprava na tvorbu
Před vytvořením jednotky div s posouváním je třeba připravit několik položek:
| 1. | Vytvořte kontejner div: |
| 2. | Nainstalujte styly kontejneru: |
| div#myScrollableDiv width: 300px; height: 200px; overflow: auto; > | |
| 3. | Přidejte obsah uvnitř kontejneru: |
Text nebo prvky |
Po dokončení těchto kroků získáte disc block div, který bude mít nastavenou velikost a umožní posouvání obsahu uvnitř sebe.
Kroky k vytvoření jednotky div s posouváním
Krok 1:
Vytvořte hlavní kontejner pomocí značky . Přiřaďte mu jedinečný identifikátor pomocí atributu id aby se k němu v CSS dostal. Například: .
Krok 2:
Určete rozměry kontejneru tak, aby měl pevnou výšku a šířku, ve které se zobrazí posuvník. Chcete-li to provést, přidejte do nemovitosti následující styly style kontejneru:
Krok 3:
Přidejte obsah uvnitř kontejneru. Pomocí značek nebo podle toho můžete přidat jakýkoli obsah, jako jsou textové bloky nebo obrázky.
Krok 4:
V případě potřeby aktualizujte styly kontejneru. Pomocí různých vlastností CSS, jako je barva pozadí, velikost písma a odsazení, můžete upravit vzhled vaší divy s posouváním.
Nyní je váš div rolovací blok připraven k použití! Uvnitř kontejneru můžete přidat více obsahu, než se vejde, a posouvat jej pomocí posuvníku, který se zobrazí automaticky.
Nastavení div bloku
Chcete-li vytvořit div rolovací blok, musíte postupovat podle následujících kroků:
- Vytvořte prvek div pomocí značky .
- Nastavte požadované velikosti bloku pomocí vlastností CSS width a height.
- Nastavte hodnotu vlastnosti overflow u div bloku na auto nebo scroll pro přidání posouvání.
Toto je příklad jednotky div s posouváním.
Zde může být jakýkoli obsah, který se nevejde do daných velikostí bloku.
Když obsah překročí velikost bloku, zobrazí se posuvník, který vám umožní zobrazit skrytý obsah.
Všimněte si, že hodnoty vlastností width a height, stejně jako velikosti bloku a obsah v příkladu, jsou ilustrativní a lze je změnit podle vašich potřeb.