CSS のみを使用して石積みレイアウトを作成するにはどうすればよいですか?

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

CSS のみを使用して、要素の高さと幅が異なる石積みスタイルのレイアウトを実現しますは長い間課題でした。 CSS3 の登場により、この課題は克服されました。

CSS3 ソリューション

CSS3 では、column-count プロパティが導入されました。これにより、列数を指定できるようになります。どのコンテンツをレイアウトする必要があるか。このプロパティを列間の間隔を定義する column-gap プロパティと組み合わせることで、石積みスタイルのレイアウトを作成できます。

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

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

このコードでは、.container 要素は次の 2 つの列を定義します。それらの間のギャップは 10px です。 .container div 要素はこれらの列内にレイアウトされ、各要素は列の幅全体に広がります。

非 CSS3 ソリューション

残念ながら、ブラウザーの場合は、は CSS3 をサポートしていないため、CSS だけでは石積みスタイルのレイアウトを実現できません。このような場合、この目的のために JavaScript ライブラリに頼る必要があるかもしれません。

以上がCSS のみを使用して石積みレイアウトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。