CSS を使用して 2 列のテキスト レイアウトを自動的に作成するにはどうすればよいですか?

CSS を使用してテキストを 2 つの列に自動的にオーバーフローする

2 つの列にシームレスに流れるテキスト レイアウトを作成するには、CSS の機能を活用することを検討してください。 。複数の div を使用する従来の方法とは異なり、CSS は、追加の HTML 要素を必要とせずに目的の結果を達成する洗練されたソリューションを提供します。

解決策は、CSS プロパティの column-count を利用することにあります。このプロパティを値 2 に設定すると、テキストを 2 つの等しい列に分割できます。美的魅力を高めるために、列ギャップを指定して列間にスペースを追加したり、列ルールを指定して列を区切る垂直線を作成したりすることもできます。

CSS がどのように見えるかの例を次に示します。

div.multi {
  column-count: 2;
  column-gap: 10px;
  column-rule: 1px solid black;      
}

テキスト コンテンツを

内でラップすることにより、クラス multi を使用すると、CSS によってテキストが自動的に 2 列にオーバーフローされ、新聞に似た視覚的に魅力的なレイアウトが作成されます。

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。