Wie kann ich in CSS dafür sorgen, dass Inhalte über die Breite eines Containers hinaus überlaufen?

Erweitern von Inhalten über die Containerbreite in CSS hinaus

Bei der Arbeit mit responsiven Rastern ist es oft notwendig, ein enthaltendes Div zu haben, das auf eine bestimmte Breite erweitert wird. In bestimmten Situationen möchten Sie jedoch möglicherweise den Inhalt über die Breite des Containers hinaus überlaufen lassen.

Betrachten Sie das folgende CSS-Beispiel:

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  padding: 0 30px;
  width: 100%;
}

Dieser Container wird auf eine maximale Breite von 1280 Pixel erweitert und fügt hinzu Polsterung auf der linken und rechten Seite. Standardmäßig wird der Inhalt dieses Containers innerhalb seiner definierten Breite umbrochen.

Damit Inhalte über die Breite des Containers hinaus überlaufen können, haben Sie zwei Möglichkeiten:

1. Verwenden Sie ein zusätzliches Div

Die einfachste Lösung besteht darin, den ursprünglichen Container zu schließen und ein neues Div zu öffnen, das sich über die gesamte Breite des Bildschirms erstreckt. Anschließend können Sie die gewünschte Hintergrundfarbe oder das gewünschte Bild auf dieses Div in voller Breite anwenden.

2. Entfernen Sie den Container

In manchen Fällen benötigen Sie möglicherweise überhaupt kein enthaltendes Div. Entfernen Sie einfach den Behälter und lassen Sie das Div über die gesamte Breite den verfügbaren Platz ausfüllen. Dieser Ansatz funktioniert gut, wenn Sie nur einen Hintergrund in voller Breite ohne zusätzlichen Inhalt außerhalb seiner Breite erreichen müssen.

Beispielcode:

<div class="container">
  <header></header>
</div>
<div class="fullwidth">
  <div class="container">
    <div class="mydiv">
      <p>Content</p>
    </div>
  </div>
</div>
<div class="container">
  <footer></footer>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
.fullwidth {
  background: orange;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  min-height: 50px;
}
footer {
  height: 50px;
  background: #bada55;
}

Wenn Sie diese Ansätze verstehen, können Sie reaktionsfähige Designs erstellen, die bei Bedarf überfüllte Inhalte über die Containerbreite hinaus aufnehmen.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS dafür sorgen, dass Inhalte über die Breite eines Containers hinaus überlaufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!