Najnowsze tutoriale tworzenie stron internetowych
 

CSS Układ - szerokość i max-width


Korzystanie szerokość, max-width i margin: auto;

Jak wspomniano w poprzednim rozdziale; element blokowy zawsze odbywa się w pełni dostępna szerokość (rozciąga się na lewo i prawo o ile to możliwe).

Ustawianie width elementu blokowego będzie uniemożliwić wyciągając do krawędzi jego kontenera. Następnie można ustawić marginesy na auto, aby poziomo wyśrodkować element jego kontenerze. Element odbędzie się na określonej szerokości, a pozostałe miejsca zostaną podzielone równo między dwie marże:

To <div> element ma szerokość 500px, a margin ustawiony na auto .

Uwaga: problem z <div> powyżej występuje, gdy okno przeglądarki jest mniejsza od szerokości elementu. Przeglądarka następnie dodaje poziomy pasek przewijania do strony.

Korzystanie max-width zamiast tego, w tej sytuacji, usprawni obsługę przeglądarki, z małymi oknami. Jest to ważne przy podejmowaniu miejsce nadające się na małych urządzeniach:

To <div> element ma max-szerokość 500px, a margin ustawiony na auto .

Wskazówka: Zmiana rozmiaru okna przeglądarki do mniej niż 500px szerokości, aby zobaczyć różnicę między dwoma div!

Oto przykład z dwóch div powyżej:

Przykład

div.ex1 {
    width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}

div.ex2 {
    max-width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}
Spróbuj sam "