ブラウザ間で壊れにくい安定した 2 列レイアウトを HTML/CSS で作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

ブラウザ間で壊れにくい安定した 2 列レイアウトを HTML/CSS で作成するにはどうすればよいですか?

DDD

リリース： 2024-11-29 22:15:15

オリジナル

440 人が閲覧しました

How to Create a Stable Two-Column Layout in HTML/CSS That Resists Breakage Across Browsers?

HTML/CSS で安定した 2 列レイアウトを実現する方法

HTML/CSS で 2 列レイアウトを作成することは、特に全体的な安定性を求める場合には困難になることがあります。さまざまなブラウザ。この記事では、最初のクエリで概説された特定の要件に対処するソリューションを提供します。

Container Properties

Width: 親要素の 100% に準拠します。
高さ: 両方の列に合わせて自動的に調整され、オーバーフローまたはスクロールバー。
最小サイズ: 左の列の幅の 2 倍に等しい。

列の仕様

高さ: 可変、コンテンツに合わせて調整高さ。
配置: 上端を揃えて並べます。
安定性: ボーダー、パディング、または列の余白。

左列仕様

幅: ピクセル単位の固定、絶対値。

右列の仕様

幅: の残りのスペースを埋めます。 container.
幅の計算: コンテナの幅から左の列の幅を引いた値。右列内の DIV 要素に 100% 幅を設定する場合、左列の右端からコンテナの右端まで列を埋める必要があります。

安定性要件

コンテナのサイズは、幅が最小であっても拡張されていても、レイアウトを崩すことなくスムーズに変更されます。
左列は固定を維持します。
右の列が左の列の下に折り返されません。
スクロールバーや列のオーバーフローはありません。
右の列の要素は幅を最大限に活用します。

考慮事項

浮動要素はカラムを防ぐために使用されますラッピング。
オーバーフロー: コンテナを確実に包含するために非表示が適用されます。
列の境界線がレイアウトを乱してはなりません。
列内のコンテンツはレイアウトの安定性を損なうものであってはなりません。

HTML/CSS ソリューション

<html>
<head>
  <title>Cols</title>
  <style>
    #left {
      width: 200px;
      float: left;
    }
    #right {
      margin-left: 200px;
    }
    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div>

ログイン後にコピー

このソリューションは次の条件を満たしていますHTML/CSS の安定した調整可能な 2 列レイアウトに指定されたすべての要件を満たし、さまざまなブラウザーでの一貫性を確保します。

以上がブラウザ間で壊れにくい安定した 2 列レイアウトを HTML/CSS で作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。