動的な高さ調整を備えた安定した 2 列の HTML/CSS レイアウトを作成する方法

安定した 2 列 HTML/CSS レイアウトの微調整

はじめに:

HTML/CSS で安定した 2 列レイアウトを設計するには、次のようないくつかの要素を慎重に考慮する必要があります。列の寸法、高さ調整、変更やコンテンツの変動に対するレイアウトの復元力。

特定の要件:

レイアウトは次の要件を満たす必要があります:

• コンテナの幅と高さは自動的に調整されます。
• コンテナの高さは、2 つの高さのうち大きい方の高さに一致します。
• コンテナの最小サイズは左の列の幅の 2 倍です。
• 列は垂直に配置され、高さは可変です。
• 境界線があっても列の寸法とレイアウトは安定しています。 、パディング、またはマージンの調整。
• 左の列のピクセル幅は固定です。
• 右の列の幅残りのコンテナ空間を埋め、幅 100% のブロック要素を全体に拡張できるようにします。

解決策:

HTML 構造:

<div>
<p><strong>CSSスタイリング:</strong></p>
<pre class="brush:php;toolbar:false">#left {
  width: 200px;
  float: left;
}
#right {
  margin-left: 200px;
}
.clear {
  clear: both;
}

このアプローチでは、CSS フロートを利用して列を並べて配置し、クリアフィックス ハック (.clear) を利用して、フローティングされた列がコンテナーの高さを折りたたむのを防ぎます。右列のマージン左により、コンテナ内の残りのスペースが確実に占有されます。

利点:

• 安定したレイアウトと列の寸法を維持します。
• コンテナの高さは列に基づいて動的に調整されます
• 可変コンテンツとレイアウトの変更を適切に処理します。
• IE8、Firefox 4、Safari 5 などの主要なブラウザと互換性があります。