HTML/CSSで垂直列を水平列に再配置するにはどうすればよいですか?

HTML/CSS の 3 列レイアウト

問題:

HTML があります左、中央、右の 3 つの列が垂直に配置されたレイアウト。 HTML 構造を変更せずに、CSS を使用してこれらの列を水平に再配置したいと考えています。

解決策:

列を水平に配置するには、次の CSS プロパティを利用できます。

.column-left { float: left; width: 33.333%; }
.column-right { float: right; width: 33.333%; }
.column-center { display: inline-block; width: 33.333%; }

説明:

• 浮動小数点: 左;左の列をコンテナの左端に揃えます。
• float: right;右の列をコンテナの右端に揃えます。
• display: inline-block;中央の列を他の列と一列に並べて配置し、ブロックレベル要素の場合に存在する空白を削除します。
• width プロパティは、各列の幅をコンテナの幅の 3 分の 1 に設定します。 .

追加のヒント:

• さらに柔軟性を高めるために、column-* クラス (例: 、column-2、column-three)。
• column-offset-* クラスを使用して列にオフセットを適用し、列間の間隔を制御できるようにします。
• column-inset を利用する-* コンテナ内に列を挿入し、レイアウトをさらにカスタマイズするためのクラス。

以上がHTML/CSSで垂直列を水平列に再配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。