左側が固定幅、右側が適応幅の CSS レイアウト_エクスペリエンス交換

BI の専門家がこのレイアウト方法について具体的に議論しましたが、彼はより多くのハックを使用し、IE6 の dtd を回避しました。実際に使ってみると、IE6 の dtd 定義を避けると、ajax モーダルボックスを中央に配置できなくなることがわかりました（自動生成されたコードである VS コントロールは修正が困難です）。そこで、練習用に、ハックは一切使用せず、左右 2 列のシンプルなレイアウトを作成しました。

CSS コード: 左と右の両方が左側に固定されます。左を右の上に設定 (z-index); 右の内側にコンテンツ レイヤー (コンテンツ) を追加; コンテンツを右の左側から 200 ピクセル (左の幅とまったく同じ) に設定します。

コードをコピー コードは次のとおりです:

* {margin:0; padding: 0; list -style:none; }
.wrapper {width: 100%; }
.left {width:200px;background:#fcc;position:absolute; left:0 ;z-index:1 }
.right {width:100%;background:#ccc;position:absolute;left:0}
.content {margin-left:200px;background:#ffc; }

完全なコード

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">タイトル> <style type="text/css"> * {マージン:0; パディング:0; リストスタイル:なし; } .wrapper {幅: 100%; } .left {幅:200px; 背景:#fcc; 位置:絶対; 左:0 ;z-index:1 } .right {幅:100%; 背景:#ccc; 位置:絶対; 左:0} .content {マージン左:200px; 背景:#ffc; } </スタイル> <本文> <div class="ラッパー"> <div class="left">左側の固定幅 200px</style>

適切な幅が自動的に適応されます