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 サイトの他の関連記事を参照してください。