Dieses Mal werde ich Ihnen zeigen, wie man das Wasserfall-Flusslayout mit CSS3 implementiert und welche Vorsichtsmaßnahmen für die Implementierung des Wasserfall-Flusslayouts mit CSS3 gelten. Hier ist ein praktischer Fall Schauen Sie mal rein.
Früher musste man js verwenden, um den Wasserfallfluss zu nutzen. Jetzt kann man ihn mit CSS3 einfach implementieren.Meisterpunkte:
1. Column-Count teilt den Text in p in mehrere Spalten. 2. Column-Width gibt die Spaltenbreite an 🎜>3. Spaltenlücke gibt Spaltenlücke an
4. Zeilenumbrüche innerhalb von Elementen vermeiden und neue Spalten generieren
Hinweis: Internet Explorer 9 und frühere IE Versionsbrowser unterstützen das Column-Count-Attribut nicht. Das
column-count-Attribut gibt die Anzahl der Spalten an, durch die Elemente getrennt werden sollen:
column-gap-Attribut gibt die Lücke zwischen Spalten an:
p
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}p
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}p
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3瀑布流</title>
<style>
/*大层*/
.container{width:80%;margin: 0 auto;}
/*瀑布流层*/
.waterfall{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari 和 Chrome */
column-count:4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
/*一个内容层*/
.item{
padding: 1em;
margin: 0 0 1em 0;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
border: 1px solid #000;
}
.item img{
width: 100%;
margin-bottom:10px;
}
</style>
</head>
<body>
<p class="container">
<p class="waterfall">
<p class="item">
<img src="https://imgsa.baidu.com/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=f3d4063328738bd4d02cba63c0e2ecb3/a2cc7cd98d1001e910616de1be0e7bec55e797fa.jpg">
<p>1 convallis timestamp</p>
</p>
<p class="item">
<img src="https://imgsa.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=03948ea9b4315c60579863bdecd8a076/8326cffc1e178a825a6b5d1cfe03738da977e833.jpg">
<p>2 convallis timestamp 2 Donec a fermentum nisi. </p>
</p>
<p class="item">
<img src="https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=3d645bf2d0ca7bcb6976cf7ddf600006/6d81800a19d8bc3efe5f64fb858ba61ea8d345af.jpg">
<p>3 Nullam eget lectus augue. Donec eu sem sit amet ligula
faucibus suscipit. Suspendisse rutrum turpis quis nunc
convallis quis aliquam mauris suscipit.</p>
</p>
<p class="item">
<img src="https://imgsa.baidu.com/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=fbc3501b0a087bf469e15fbb93ba3c49/bf096b63f6246b60ea65dd24e3f81a4c510fa273.jpg">
<p> 4 Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue. </p>
</p>
<p class="item">
<img src="https://imgsa.baidu.com/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=9fe1d71697ef76c6c4dff379fc7f969f/b03533fa828ba61ed2efcd184634970a304e5987.jpg">
<p> 5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
</p>
</p>
</p>
</body>
</html>Empfohlene Lektüre:
CSS3-gestreifter HintergrundCSS3-TextverlaufsanimationDynamischer CSS3-Eingabeaufforderungseffekt, wenn sich die Maus in das Bild bewegtDas obige ist der detaillierte Inhalt vonCSS3-Methode zur Implementierung des Wasserfall-Flow-Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
