この記事では、元の HTML 構造を変更せずに HTML 列を配置する方法について説明します。具体的には、以下に示すように、レイアウトを
<div class="container"> <div class="column-center">Column center</div> <div class="column-left">Column left</div> <div class="column-right">Column right</div> </div>
からグリッド状の構造に変換することに重点を置いています。
---------------------------------------------------- | | | | | Column left | Column center | Column right | | | | | ----------------------------------------------------
これを実現するにはHTML、CSSを変更せずに変換できます。以下の例に示すように、column-left、column-right、column-center クラスの float プロパティと width プロパティを設定するだけで、要素を水平方向に整列させることができます。
.column-left { float: left; width: 33.333%; } .column-right { float: right; width: 33.333%; } .column-center { display: inline-block; width: 33.333%; }
このアプローチは、より多くの列を収容できるように拡張できます。たとえば、次の CSS ルールを使用して 5 列のレイアウトを作成できます。
.column { float: left; position: relative; width: 20%; } .column-offset-1 { left: 20%; } .column-offset-2 { left: 40%; } .column-offset-3 { left: 60%; } .column-offset-4 { left: 80%; } .column-inset-1 { left: -20%; } .column-inset-2 { left: -40%; } .column-inset-3 { left: -60%; } .column-inset-4 { left: -80%; }
これらのオフセット クラスとインセット クラスを利用することで、必要に応じて列を配置および整列できます。
<div class="container"> <div class="column column-one column-offset-2">Column one</div> <div class="column column-two column-inset-1">Column two</div> <div class="column column-three column-offset-1">Column three</div> <div class="column column-four column-inset-2">Column four</div> <div class="column column-five">Column five</div> </div>
以上が元の HTML 構造を変更せずに、HTML と CSS を使用して 3 列のレイアウトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。