ホームページ > 記事 > ウェブフロントエンド > css3 複数列とウォーターフォール効果のサンプルコード
css3 複数列とウォーターフォール効果のサンプルコード
- 高洛峰オリジナル
- 2017-03-09 18:37:511214ブラウズ
この記事では、CSS3のマルチカラムとウォーターフォールフロー効果のサンプルコードを紹介します
css3コンテンツブロック、マルチカラム効果（新聞のセクションレイアウトと同様）:
.p02{ /*count:内容分为几列，gap:内容与分割线的距离，rule:分割线样式*/
column-count:4;
column-gap:30px;
column-rule:5px outset #ff0000;
-webkit-column-count: 4;
-webkit-column-gap: 30px;
-webkit-column-rule: 5px outset #ff0000;
}
css3は画像のウォーターフォールフローレイアウトを実現します:
.container {
column-width: 350px;
-webkit-column-width: 350px;
column-gap: 5px;
-webkit-column-gap: 5px;
}img {
width: 400px;
}.container p {
width: 350px;
margin: 5px;
}p {
text-align: center;
}
滝の流れ効果の HTML コードは次のとおりです:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="pubuliu.css" /> </head> <body> <p class="container"> <p><img src="../../image/5.jpg" /></p> <p><img src="../../image/2.jpg" /><p>文字描述</p></p> <p><img src="../../image/5.jpg" /></p> <p><img src="../../image/2.jpg" /></p> <p><img src="../../image/5.jpg" /><p>文字描述</p></p> <p><img src="../../image/3.jpg" /></p> <p><img src="../../image/5.jpg" /></p> <p><img src="../../image/5.jpg" /></p> <p><img src="../../image/3.jpg" /></p> <p><img src="../../image/5.jpg" /></p> <p><img src="../../image/5.jpg" /><p>文字描述</p></p> <p><img src="../../image/5.jpg" /></p> <p><img src="../../image/5.jpg" /></p> <p><img src="../../image/5.jpg" /></p> <p><img src="../../image/5.jpg" /><p>文字描述</p></p> <p><img src="../../image/5.jpg" /></p> <p><img src="../../image/5.jpg" /></p> </p> </body></html>
以上がcss3 複数列とウォーターフォール効果のサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：css3セレクターの説明次の記事：css3セレクターの説明