CSS 複数列レイアウトのプロパティ: 列数と列ギャップ-CSSチュートリアル-php.cn

CSS 複数列レイアウトのプロパティ: 列数と列ギャップ

PHPz

リリース： 2023-10-28 08:35:33

オリジナル

1458 人が閲覧しました

CSS 多列布局属性：column-count 和 column-gap

CSS 複数列レイアウトのプロパティ: 列数と列ギャップ、特定のコード例が必要です

フロントエンド開発では、複数列レイアウトの実装は次のとおりです。非常に一般的な要件です。 CSS には、複数列レイアウトを簡単に実装できる 2 つのプロパティ、column-count と columns-gap があります。

column-count 属性

column-count 属性は、要素のコンテンツを何列に分割するかを指定するために使用されます。コンテンツを何列に分割するかを示す正の整数値を受け入れます。 columns-count 属性が設定されている場合、ブラウザーが自動的に列数の計算とレイアウトを支援してくれることに注意してください。

以下は例です:

HTML コード:

<div class="columns">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Morbi sit amet urna leo. Suspendisse potenti.</p>
  <p>Nunc dapibus vitae libero a tristique. Donec vitae commodo sem, eu tristique erat.</p>
  <p>Fusce tristique lorem sed ipsum consectetur, nec laoreet dui euismod.</p>
  <p>Maecenas eget sem id ex feugiat placerat. Sed nec enim placerat, tristique diam in, sollicitudin sapien.</p>
</div>

ログイン後にコピー

CSS コード:

.columns {
  column-count: 3;
}

ログイン後にコピー

上記のコードは

要素の段落をラップします。テキストは 3 列に表示されます。ブラウザは列の長さと数に基づいてコンテンツを自動的にレイアウトし、複数列表示を実現します。

column-gap 属性

column-gap 属性は、列間の距離を指定するために使用されます。列間の間隔を表す長さの値を受け入れます。ピクセル値、パーセンテージ、またはキーワードを使用して、対応する距離を設定できます。

以下は例です:

HTML コード:

<div class="columns">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Morbi sit amet urna leo. Suspendisse potenti.</p>
  <p>Nunc dapibus vitae libero a tristique. Donec vitae commodo sem, eu tristique erat.</p>
  <p>Fusce tristique lorem sed ipsum consectetur, nec laoreet dui euismod.</p>
  <p>Maecenas eget sem id ex feugiat placerat. Sed nec enim placerat, tristique diam in, sollicitudin sapien.</p>
</div>

ログイン後にコピー

CSS コード:

.columns {
  column-count: 3;
  column-gap: 20px;
}

ログイン後にコピー

上記のコードは

要素の段落をラップします。テキストは 3 列で表示され、各列の間には 20 ピクセルの間隔があけられます。

概要:

column-count 属性と column-gap 属性を使用すると、複数列レイアウトを簡単に実装できます。 column-count はコンテンツを分割する列の数を指定するために使用され、column-gap は列間の距離を指定するために使用されます。これら 2 つの属性は、複数列のレイアウト効果を迅速に達成し、優れた制御性を実現するのに役立ちます。

上記は、CSS の複数列レイアウトのプロパティである column-count と column-gap についての紹介です。どなたでも、実際のプロジェクトでこれらのプロパティを使用して、より良いレイアウト効果を実現してみてください。

以上がCSS 複数列レイアウトのプロパティ: 列数と列ギャップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。