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
4/10