Kann CSS ein Mauerwerkslayout ohne JavaScript erstellen?

Kann CSS allein ein Layout im Mauerwerksstil erstellen?

Das Mauerwerkslayout weist die folgenden Merkmale auf:

• Kästen variieren in der Höhe.
• Einige Boxen sind deutlich breiter.

Kann dieses Layout erreicht werden? ausschließlich über CSS?

CSS-Ansatz

In der Tat ist es mit CSS3-Unterstützung machbar:

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

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

Nicht-CSS3-Ansatz

Leider dieses Layout erfordert JavaScript, da keine CSS3-Unterstützung vorhanden ist.

Das obige ist der detaillierte Inhalt vonKann CSS ein Mauerwerkslayout ohne JavaScript erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!