Zobrazení jako blok v řádku

Poslední možnost zobrazení na kterou se podíváme je zobrazení prvku jako blok v řádku, což, jak už název napovídá, je kombinací blokového zobrazení a zobrazení v řádku.

Zobrazení jako blok v řádku se chová jako zobrazení v řádku s tím rozdílem, že můžeme nastavovat šířku a výšku (Kdybychom nastavili šířku prvku na šířku rodiče tak se bude chovat jako blokový prvek).

Nejlepším příkladem prvku, který je zobrazován jako blok v řádku je obrázek (img).

Pro nastavení prvku na zobrazení v řádku použijeme následující deklaraci display: inline-block;

Pokyny

Připravili jsme vám 3 členící prvky (div). Jak můžete vidět, tak prvky div jsou normálně blokové a proto se zobrazují pod sebou. Nastavte jim zobrazení (display) na blokové v řádku (inline-block).

V selektoru .ctverec změňte šířku (width) ze 100px na 40% (toto nastaví šířku prvku na 40 % šířky stránky).

Všimněte si, že třetí čtverec se již na jeden řádek nevleze a tak se chytře posune na další řádek.

Začněte programovat zdarma

Registrací souhlasíte s provozními podmínkami a zásadami ochrany osobních údajů.

Nebo se registrujte pomocí:

4/10

Zobrazení jako blok v řádku | Start Coder