石積みスタイルのレイアウトは CSS だけで実現できますか?

CSS を使用した石積みスタイルのレイアウトの作成

石積みスタイルのレイアウトでは、要素がさまざまな高さの列に配置され、視覚的に魅力的でダイナミックなディスプレイ。通常、この効果を実現するには CSS と JavaScript が使用されますが、CSS のみで実現できますか?

CSS では可能ですか?

はい、 CSS3 のマルチカラム機能の導入により、純粋な CSS を使用して石積みスタイルのレイアウトを作成できるようになりました。重要なのは、コンテナの列数、ギャップ、幅を指定することです。

CSS3 ソリューション

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

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

この例では、「.container」は2 つの列とそれらの間に 10 ピクセルのギャップがあるレイアウト。コンテナ内では、各 ".container div" 要素がインライン ブロックとして配置され、幅 100% を占め、赤色で表示されます。

CSS3 を使用しない代替手段

If CSS3 サポートは利用できません。石積みスタイルのレイアウトを実現するには、JavaScript ベースのソリューションが必要です。ただし、CSS3 は、外部スクリプトに頼らずにこれらのレイアウトを作成する便利で効率的な方法を提供します。

以上が石積みスタイルのレイアウトは CSS だけで実現できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。