CSSでHoly Grailレイアウトを実装(2列固定 - 中央列フローティング - 中央列divを最前面に配置) - 詳細説明_html/css_WEB-ITnose

聖杯レイアウト: 2 列固定 - 中央列フローティング - 中央列 div が 1 位にランク付けされる利点は、ネットワーク速度が遅い場合にコンテンツ列を最初に表示できることです

追加の DIV には 3 つのレイヤーが含まれています。この構造は、コンテンツを 1 つとしてマークする私の習慣に沿ったもので、左側のサイドバーは 200PX、右側は 150 です。マーキングに使用され、CC はそれぞれ左、右、中央を表します。スタイルは次のとおりです。 left: 200px; /* LC width */
padding-right: 150px; /* RC width */

}

#container .column {
位置: 相対;
float: left;
}
#center {
width: 100%;
}
# left {
width: 200px; /* LC 幅 */
right: 200px; /* LC 幅 */
margin-left: -100%;
}
#right {
width: 150px ; /* RC 幅 */
margin-right: -150px; /* RC 幅 */
}
#footer {
クリア: 両方;
}
/*** IE6 修正 ***/
* html #left {
left: 150px; /* RC width */
}

原理
実際、トリックは非常に簡単で、左の列とラップの左側のパディング、右の列と右のパディングを配置します。アダプティブ コンテンツ レイヤーを中央に残すだけです。左はラップのパディング左を占め、右はラップのパディング右を占めます

関連ラベル：

css实现圣杯布局（两栏固定-中列浮动-中列div排在前面）--详解

前の記事：SEO_html/css_WEB-ITnoseに有利なDIV+CSS仕様まとめ 次の記事：_html/css_WEB-ITnose をクリックした後に js+css+div を表示または非表示にする

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

リモート ウェアハウスを git に追加した後、プッシュできません

から 1970-01-01 08:00:00

0

0

0

Objective-C のブロックと Swift のクロージャの違いは何ですか?

から 1970-01-01 08:00:00

0

0

0

github - git は特定のサフィックスを除くすべてのファイルを無視できますか

から 1970-01-01 08:00:00

0

0

0

object-c - この cas ファイルを偶然見ましたか?これはどのように書かれているか聞いてもいいでしょうか？

から 1970-01-01 08:00:00

0

0

0

bash での git 完了エラー

から 1970-01-01 08:00:00

0

0

0

関連トピック

詳細>

• jsでの各関数の使い方
• MySQL ストアド プロシージャの削除
• oracleのトリガー追加メソッド
• rewritecondの使用法
• C++ ソフトウェア中国語変更チュートリアル
• win10のスクリーンショットショートカットキーの紹介
• アプリのリソースライブラリを閉じる方法
• Ouyiアプリのダウンロード