CSS-Layout - width und max-width

Verwenden Sie width, max-width und margin: auto;

Wie im vorherigen Kapitel beschrieben, belegen Block-Elemente immer die gesamte verfügbare Breite (so weit links und rechts wie möglich).

Setzen Sie die Breite eines Block-Elements Breite Das verhindert, dass es sich bis zum Rand des Containers ausdehnt. Dann können Sie den Abstand auf auto setzen, um das Element im Container horizontal zentral auszurichten. Das Element belegt die angegebene Breite, und der verbleibende Raum wird zwischen den Abständen gleichmäßig aufgeteilt:

Die Breite dieses <div>-Elements beträgt 500px, und der Abstand ist auf auto gesetzt.

Hinweis:Wenn das Browserfenster breiter ist als die Breite des Elements, dann ist dieser <div> könnte ein Problem verursachen. Der Browser fügt einen horizontalen Scrollbalken zur Seite hinzu.

In diesem Fall wird max-width Dies kann die Verarbeitung kleiner Fenster durch den Browser verbessern. Dies ist wichtig, um sicherzustellen, dass die Website auf kleinen Geräten nutzbar ist:

Der maximale Breite dieses <div>-Elements beträgt 500px, die Außenabstände sind auf auto gesetzt.

Hinweis:Passen Sie die Größe des Browserfensters auf weniger als 500 Pixel an, um den Unterschied zwischen den beiden divs zu sehen!

Dies ist ein Beispiel für die beiden obigen divs:

Beispiel

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

Probieren Sie es selbst aus