Beispielcode zur Implementierung eines Karten-Wasserfall-Layouts mit CSS3-Spalten

In diesem Artikel wird der Beispielcode einer CSS3-Spalte zur Realisierung des Karten-Wasserfall-Layouts vorgestellt, der wie folgt mit Ihnen geteilt wird:

Ergebnisse erzielen

Heute stieß ich auf das Problem, ein Wasserfalllayout von Karten zu implementieren, und die Höhen der Karten waren unterschiedlich.

Schließlich habe ich das Spaltenattribut in CSS3 verwendet, um dieses Layout zu implementieren. Es war sehr einfach (ich erinnere mich vage, dass ich das letzte Mal, als ich den Wasserfallfluss geschrieben habe, JS zur Implementierung verwendet habe ... naiv).

Die Wirkung ist wie folgt:

Verwandte Eigenschaften

1. column-count: die Anzahl der Spalten, die Sie erreichen möchten, ich brauche hier nur 2 Spalten
2. column-width: Die Breite der Spalte
3. column-gap: Der Abstand zwischen den Spalten
4. break-inside:avoid: Wenn Sie dieses Attribut für die untergeordneten Elemente (jede Karte) nicht festlegen, wird eine Karte abgeschnitten und in verschiedenen Spalten angezeigt.

Aufgetretene Probleme

1. Bei der Implementierung ist mir ein kleines Problem aufgefallen: Der untere Rand meiner Karte wurde abgeschnitten.
2. Gelöst durch Festlegen von „overflow:auto“ für untergeordnete Elemente.

Code

       .videoCards {
            Polsterung oben: 4rpx;
            Spaltenanzahl: 2;
            Spaltenlücke: 18rpx;

            .Karte {
                Anzeige: Inline-Block;
                Rand oben: 20rpx;
                Breite: 326rpx;
                Hintergrund: #FFFFFF;
                Kastenschatten: 0 0 10rpx 0 rgba(0,0,0,0,10);
                Rahmenradius: 14rpx;
                einbrechen: vermeiden;
                Polsterung unten: 20rpx;
                Überlauf: automatisch;
                }
        }

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.