ウォーターフォールフローレイアウトをCSSで実装する方法
css
フレックスレイアウト
複数列のレイアウト
滝の流れのレイアウト
CSS を使用してウォーターフォール フロー レイアウトを実装する方法: 1. 複数列の複数列レイアウトを使用します。 2. これを実現するには、フレックス レイアウトを使用します。外側のレイヤーを行レイアウトに設定し、次にコンテナを設定して列レイアウトに設定します。列を全体として扱い、列を分割し、幅を固定します。コラムです。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
ウォーターフォール フローのレイアウトはやはり魅力的だと感じています。最近、ウォーターフォール フローの実装を実践しているのを目にしました。ここに記録します。特に、フレックス レイアウトでのウォーターフォール フローの実装は素晴らしいと感じています。まだ少し混乱していますが、その原理を理解できるようになりました。
1.ウォーターフォール フローを実装するための複数列の複数列のレイアウト
最初に、いくつかのプロパティについて簡単に説明します。複数列に関連する
- column-count は列数を設定します
- column-gap は列間の間隔を設定します
- column-width は各列の幅を設定しますcolumn
また、サブコンテナーでブレークインサイドの設定を組み合わせて、複数列レイアウト、ページ分割されたメディア、および複数リージョンのコンテキストでの予期せぬ中断を防ぎます
break-inside属性值 auto 指定既不强制也不禁止元素内的页/列中断。 avoid 指定避免元素内的分页符。 avoid-page 指定避免元素内的分页符。 avoid-column 指定避免元素内的列中断。 avoid-region 指定避免元素内的区域中断。
ログイン後にコピー
- インターセプトされた部分自分で入力できます
/* html文件 */
<!-- 使用multi-columns实现瀑布流 -->
<div id="root">
<div class="item">
<img class="itemImg lazy" src="/static/imghw/default1.png" data-src="../images/1.jpeg" alt=""/>
<div class="userInfo">
<img class="avatar lazy" src="/static/imghw/default1.png" data-src="../images/gift.png" alt=""/>
<span class="username">牵起你的左手护着你</span>
</div>
</div>
<div class="item">
<img class="itemImg lazy" src="/static/imghw/default1.png" data-src="../images/2.jpg" alt=""/>
<div class="userInfo">
<img class="avatar lazy" src="/static/imghw/default1.png" data-src="../images/gift.png" alt=""/>
<span class="username">牵起你的左手护着你</span>
</div>
</div>
<div class="item">
<img class="itemImg lazy" src="/static/imghw/default1.png" data-src="../images/3.jpg" alt=""/>
<div class="userInfo">
<img class="avatar lazy" src="/static/imghw/default1.png" data-src="../images/gift.png" alt=""/>
<span class="username">牵起你的左手护着你</span>
</div>
</div>
<div class="item">
<img class="itemImg lazy" src="/static/imghw/default1.png" data-src="../images/4.jpg" alt=""/>
<div class="userInfo">
<img class="avatar lazy" src="/static/imghw/default1.png" data-src="../images/gift.png" alt=""/>
<span class="username">牵起你的左手护着你</span>
</div>
</div>
<div class="item">
<img class="itemImg lazy" src="/static/imghw/default1.png" data-src="../images/5.jpeg" alt=""/>
<div class="userInfo">
<img class="avatar lazy" src="/static/imghw/default1.png" data-src="../images/gift.png" alt=""/>
<span class="username">牵起你的左手护着你</span>
</div>
</div>
</div>ログイン後にコピー
/* css样式 */
body {
background: #e5e5e5;
}
/* 瀑布流最外层 */
#root {
margin: 0 auto;
width: 1200px;
column-count: 5;
column-width: 240px;
column-gap: 20px;
}
/* 每一列图片包含层 */
.item {
margin-bottom: 10px;
/* 防止多列布局，分页媒体和多区域上下文中的意外中断 */
break-inside: avoid;
background: #fff;
}
.item:hover {
box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
}
/* 图片 */
.itemImg {
width: 100%;
vertical-align: middle;
}
/* 图片下的信息包含层 */
.userInfo {
padding: 5px 10px;
}
.avatar {
vertical-align: middle;
width: 30px;
height: 30px;
border-radius: 50%;
}
.username {
margin-left: 5px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}ログイン後にコピー
##2.flex レイアウトでウォーターフォール フローを実装します
##外層の設定行レイアウトの場合はコンテナを設置し、列レイアウトとして列を全体として扱い、列を分割して列幅を固定することで実現します。/* html文件（只截取两列布局）*/ <div id="root"> <div class="itemContainer"> <div class="item"> <img class="itemImg lazy" src="/static/imghw/default1.png" data-src="../images/1.jpeg" alt=""/> <div class="userInfo"> <img class="avatar lazy" src="/static/imghw/default1.png" data-src="../images/gift.png" alt=""/> <span class="username">牵起你的左手护着你</span> </div> </div> <div class="item"> <img class="itemImg lazy" src="/static/imghw/default1.png" data-src="../images/2.jpg" alt=""/> <div class="userInfo"> <img class="avatar lazy" src="/static/imghw/default1.png" data-src="../images/gift.png" alt=""/> <span class="username">牵起你的左手护着你</span> </div> </div> <div class="item"> <img class="itemImg lazy" src="/static/imghw/default1.png" data-src="../images/3.jpg" alt=""/> <div class="userInfo"> <img class="avatar lazy" src="/static/imghw/default1.png" data-src="../images/gift.png" alt=""/> <span class="username">牵起你的左手护着你</span> </div> </div> <div class="item"> <img class="itemImg lazy" src="/static/imghw/default1.png" data-src="../images/4.jpg" alt=""/> <div class="userInfo"> <img class="avatar lazy" src="/static/imghw/default1.png" data-src="../images/gift.png" alt=""/> <span class="username">牵起你的左手护着你</span> </div> </div> <div class="item"> <img class="itemImg lazy" src="/static/imghw/default1.png" data-src="../images/5.jpeg" alt=""/> <div class="userInfo"> <img class="avatar lazy" src="/static/imghw/default1.png" data-src="../images/gift.png" alt=""/> <span class="username">牵起你的左手护着你</span> </div> </div> <div class="item"> <img class="itemImg lazy" src="/static/imghw/default1.png" data-src="../images/6.jpeg" alt=""/> <div class="userInfo"> <img class="avatar lazy" src="/static/imghw/default1.png" data-src="../images/gift.png" alt=""/> <span class="username">牵起你的左手护着你</span> </div> </div> <div class="item"> <img class="itemImg lazy" src="/static/imghw/default1.png" data-src="../images/7.jpeg" alt=""/> <div class="userInfo"> <img class="avatar lazy" src="/static/imghw/default1.png" data-src="../images/gift.png" alt=""/> <span class="username">牵起你的左手护着你</span> </div> </div> </div> <div class="itemContainer"> <div class="item"> <img class="itemImg lazy" src="/static/imghw/default1.png" data-src="../images/5.jpeg" alt=""/> <div class="userInfo"> <img class="avatar lazy" src="/static/imghw/default1.png" data-src="../images/gift.png" alt=""/> <span class="username">牵起你的左手护着你</span> </div> </div> <div class="item"> <img class="itemImg lazy" src="/static/imghw/default1.png" data-src="../images/7.jpeg" alt=""/> <div class="userInfo"> <img class="avatar lazy" src="/static/imghw/default1.png" data-src="../images/gift.png" alt=""/> <span class="username">牵起你的左手护着你</span> </div> </div> <div class="item"> <img class="itemImg lazy" src="/static/imghw/default1.png" data-src="../images/6.jpeg" alt=""/> <div class="userInfo"> <img class="avatar lazy" src="/static/imghw/default1.png" data-src="../images/gift.png" alt=""/> <span class="username">牵起你的左手护着你</span> </div> </div> <div class="item"> <img class="itemImg lazy" src="/static/imghw/default1.png" data-src="../images/5.jpeg" alt=""/> <div class="userInfo"> <img class="avatar lazy" src="/static/imghw/default1.png" data-src="../images/gift.png" alt=""/> <span class="username">牵起你的左手护着你</span> </div> </div> <div class="item"> <img class="itemImg lazy" src="/static/imghw/default1.png" data-src="../images/6.jpeg" alt=""/> <div class="userInfo"> <img class="avatar lazy" src="/static/imghw/default1.png" data-src="../images/gift.png" alt=""/> <span class="username">牵起你的左手护着你</span> </div> </div> <div class="item"> <img class="itemImg lazy" src="/static/imghw/default1.png" data-src="../images/6.jpeg" alt=""/> <div class="userInfo"> <img class="avatar lazy" src="/static/imghw/default1.png" data-src="../images/gift.png" alt=""/> <span class="username">牵起你的左手护着你</span> </div> </div> </div> </div>ログイン後にコピー/* css文件 */ body{ background: #e5e5e5; } #root{ display: flex; flex-direction: row; margin: 0 auto; width: 1200px; } .itemContainer{ margin-right: 10px; flex-direction: column; width: 240px; } .item{ margin-bottom: 10px; background: #fff; } .itemImg{ width: 100%; } .userInfo { padding: 5px 10px; } .avatar { vertical-align: middle; width: 30px; height: 30px; border-radius: 50%; } .username { margin-left: 5px; text-shadow: 2px 2px 2px rgba(0, 0, 0, .3); }ログイン後にコピー
- 実践後、純粋な CSS によって実装されたウォーターフォール フローは列ごとにのみ配置できることがわかりました。 js を使用してウォーターフォール フローを実装します。これは、一般的なウォーターフォール フローにより一致します
- (学習ビデオ共有:
以上がウォーターフォールフローレイアウトをCSSで実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
4週間前
By 尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前
By DDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.チャットコマンドとそれらの使用方法
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7529
15
7529
15
CakePHP チュートリアル
1378
52
1378
52
Steamのアカウント名の形式は何ですか
82
11
82
11
NYTの接続はヒントと回答です
21
76
21
76
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
ブートストラップの日付を表示する方法
Apr 07, 2025 pm 03:03 PM
回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。
