CSS Layout - width og max-width

Brug width, max-width og margin: auto;

Som nævnt i det forrige kapitel, optager blokklækkende elementer alt tilgængeligt rum (søger så meget til venstre og højre som muligt).

Indstil bredde for blokklækkende elementer width Dette vil forhindre det i at strække sig ud til kanens kant. Derefter kan du sætte margin til auto for at centrere elementet vandret i kanen. Elementet vil tage den angivne bredde, og den resterende plads vil blive fordelt ligeligt mellem de to margins:

Bredden på dette <div>-element er 500px, og margin er sat til auto.

Bemærk:Når browserens vindue er mindre end elementets bredde, er det her <div> vil forårsage problemer. Browseren tilføjer en vandret rullespalte til siden.

I dette tilfælde bruges max-width Det kan forbedre browserens håndtering af små vinduer. Det er vigtigt for at gøre websitet tilgængeligt på små enheder:

Denne <div>-elementets maksimale bredde er 500px, og marginen er sat til auto.

Tip:Juster browservinduet til mindre end 500 pixel for at se forskellen mellem de to div'er!

Dette er et eksempel på de to ovennævnte div'er:

Eksempel

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

Prøv det selv