Rozložení CSS - šířka a maximální šířka
Použití šířky, maximální šířky a okraje: auto;
Jak bylo zmíněno v předchozí kapitole; prvek na úrovni bloku vždy zabírá celou dostupnou šířku (natahuje se doleva a doprava, jak nejvíce to jde).
Nastavení width
prvku na úrovni bloku zabrání tomu, aby se natáhl k okrajům jeho kontejneru. Poté můžete nastavit okraje na automatické, aby byl prvek v kontejneru horizontálně vycentrován. Prvek bude zabírat určenou šířku a zbývající prostor bude rovnoměrně rozdělen mezi dva okraje:
Poznámka: Problém s <div>
výše uvedeným nastává, když je okno prohlížeče menší než šířka prvku. Prohlížeč pak na stránku přidá vodorovný posuvník.
Použití max-width
místo toho v této situaci zlepší práci prohlížeče s malými okny. To je důležité, když je web použitelný na malých zařízeních:
Tip: Změňte velikost okna prohlížeče na šířku menší než 500 pixelů, abyste viděli rozdíl mezi těmito dvěma prvky div!
Zde je příklad dvou výše uvedených divů:
Příklad
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}