CSS と JavaScript を使用して複数列のテキスト レイアウトを作成する方法

CSS と JavaScript を使用した複数列のテキスト レイアウト

複数の列にテキストが流れ込む新聞のようなレイアウトの作成は、CSS を使用して実現できます。または JavaScript。

CSS のみ解決策

CSS だけを使用して複数列のテキストを簡単に作成するには、次のコードを利用します。

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

JavaScript 解決策

場合JavaScript が推奨されます。コンテンツ div 内の段落 (

要素) の数を推定するソリューションを検討してください。それらの半分を右に移動します。ただし、この方法はより複雑であり、追加の JavaScript の専門知識が必要になる場合があります。

以上がCSS と JavaScript を使用して複数列のテキスト レイアウトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。