コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 左側が固定幅、右側が適応幅の CSS レイアウト_エクスペリエンス交換

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

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

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
前の記事：IE ff Opera でアルファ透明化を同時にサポートする方法_体験交流 次の記事：IE6 は位置をサポートします:固定の完璧なソリューション_エクスペリエンス交換
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
フォームからオプションを選択するときに画像の不透明度を変更する 値 1 (MasterCard) のオプションを選択したときに、idMaster の画像の不透明度を 1 に変更するにはどうすればよいですか?それを、それぞれ独自の ID を持つこ...
から 2024-04-03 23:00:48
0
2
304
サイドバーが開いたときに div が左に押されるように、サイドバーの隣に div を配置する方法 サイドバーを開くと、メインコンテンツの div が右に寄せられるのではなくサイドバーの下に配置され、表示されるときの div の px はサイドバーの幅と等しくなるはずです。 cs...
から 2024-04-03 14:47:21
0
1
325
レスポンシブ画像とテキスト Div を並べて表示 そこで、1 つの div が画像で、もう 1 つが背景付きのテキストであるテンプレートを作成しようとしています。次に、このテンプレートをレスポンシブにして、テキストが特定のピクセル...
から 2024-04-02 08:59:38
0
1
349
Postman を使用して登録機能をテストするためにリクエスト本文を入力できない *修正済み* 私は、ユーザーが登録、ログイン、投稿の作成、プロフィールと投稿の編集、投稿の削除、自分自身の完全な削除ができる、非常にシンプルなソーシャル メディア アプリケーションを開発していま...
から 2024-04-01 10:09:37
0
1
348
CSS のないプレーン HTML: Colspan が th/td で正しく動作せず、すべての行で一貫性があります。 コルスパンが機能しない理由がわかりません。 CSS ソリューションはありますが、なぜこれが機能しないのか混乱しています。最初の列の幅は他の列の 1/3 にする必要があります。最初の...
から 2024-03-31 17:28:21
0
1
325
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート