ホームページ > ウェブフロントエンド > CSSチュートリアル > 左側が固定幅、右側が適応幅の CSS レイアウト_エクスペリエンス交換

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

WBOY
リリース: 2016-05-16 12:04:42
オリジナル
1253 人が閲覧しました

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; }
完全なコード
適切な幅が自動的に適応されます
関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート