CSS は JavaScript なしでメーソンリー レイアウトを作成できますか?

CSS だけで石積みスタイルのレイアウトを作成できますか?

石積みレイアウトには次の特徴があります:

• ボックスの高さは異なります。
• 一部のボックスには目立つ傷があります

このレイアウトは CSS だけで実現できますか?

CSS のアプローチ

実際、CSS3 サポートにより実現可能です:

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

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

非 CSS3 アプローチ

残念ながら、このレイアウトはCSS3 がサポートされていない場合は JavaScript が必要です。

以上がCSS は JavaScript なしでメーソンリー レイアウトを作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。