HTMLを変更せずにCSSを使用して3列レイアウトを作成するにはどうすればよいですか?

HTML を変更せずに CSS を使用して 3 列のレイアウトを作成する方法

HTML を使用すると、それぞれに 3 つの列を含むコンテナーが作成されます。個別のクラス (「column-left」、「column-center」、および「column-right」)。目標は、CSS を使用して HTML 構造を変更せずに、これらの列を水平に配置することです。

解決策

この目的のレイアウトを実現するには、次の CSS ルールを組み込みます。

.column-left {
  float: left;
  width: 33.333%;
}

.column-right {
  float: right;
  width: 33.333%;
}

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

この CSS により、左右の列がコンテナのそれぞれの側にフロートし、中央の列が残りのスペースに表示されます。

デモ

<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>

強化されたグリッド システム

このアプローチを複数の列に拡張するには、単純なグリッド システムの作成を検討してください。たとえば、5 列のレイアウトの場合、次の CSS で十分です。

.column {
  float: left;
  position: relative;
  width: 20%;
  
  /*for demo purposes only */
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
  box-sizing: border-box;
}

.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%;
}

この強化されたグリッドを使用すると、適切なオフセット クラスまたはインセット クラスを適用することで列を正確に配置できます。

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