Wie kann ich ein Mauerwerkslayout nur mit CSS erstellen?

Erstellen eines Layouts im Mauerwerksstil mit CSS

Erzielen eines Layouts im Mauerwerksstil, bei dem Elemente unterschiedliche Höhen und Breiten haben, allein durch CSS ist schon lange eine Herausforderung. Mit der Einführung von CSS3 wurde diese Herausforderung überwunden.

CSS3-Lösung

CSS3 führt die Eigenschaft „column-count“ ein, mit der Sie die Anzahl der Spalten angeben können welche Inhalte angelegt werden sollen. Durch die Kombination dieser Eigenschaft mit der Column-Gap-Eigenschaft, die den Abstand zwischen Spalten definiert, ist es möglich, ein Layout im Mauerwerksstil zu erstellen.

.container {
  column-count: 2;
  column-gap: 10px;
  width: 360px;
}

.container div {
  display: inline-block;
  width: 100%;
  background-color: red;
}

In diesem Code definiert das .container-Element zwei Spalten mit eine Lücke von 10 Pixel zwischen ihnen. Die .container div-Elemente sind innerhalb dieser Spalten angeordnet, wobei jedes Element die gesamte Breite der Spalte abdeckt.

Nicht-CSS3-Lösung

Leider ist das für Browser so CSS3 nicht unterstützen, kann ein Layout im Mauerwerksstil nicht allein durch CSS erreicht werden. In solchen Fällen müssen Sie zu diesem Zweck möglicherweise auf JavaScript-Bibliotheken zurückgreifen.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Mauerwerkslayout nur mit CSS erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!