Archiv štítku: clear

Jak vyplnit prostor mezi plovoucímy prvky?

Pokud používáte plovoucí prvky, asi narazíte na problém, že prvky, které je obtékají se chovají poněkud podivně a zasahují i do prostoru rezervovaného pro plovoucí prvky:

Left
Right
center
center
center

 

V případě textu obtékajícího obrázek, což je nejčastější použití v článcích, je to efekt očekávaný, ale co dělat, když potřebujete, např. ve speciálním layoutu webové aplikace, aby prostřední prvek vyplnil prostor mezi plovoucími prvky a přitom do nich nepřesahoval?

Řešení je kupodivu velice jednoduché – stačí prostředními prvku nastavit oveflow:hidden a prohlížeč, aby zabránil překrývání plovoucího prvku obsahem toho prostředního, změní jeho šířku.

Left
Right
center
center
center

 

Pokračování textu Jak vyplnit prostor mezi plovoucímy prvky?

HR může pomoci při obtékání

Element HR slouží jako vodorovná čára. Pokud ho ale nepoužíváte a naopak používáte plovoucí prvky (float), občas (nebo spíše často) můžete potřebovat obtékání zastavit (clear).

K tomu lze snadno použít právě element HR, kterému seberete okraj (border):

hr {
    clear: both;
    border: 0 none;
    height: 0;
}

Díky tomu, že HR ve výchozím stylu zabírá pouze jeden pixel na výšku (někdy 2px, protože vytváří stínovanou čáru) a má pouze horní rámeček (border-top), se dá takhle snadno změnit na neviditelný oddělovač plovoucích prvků.