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 */
}

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

声明：

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

前の記事：SEO_html/css_WEB-ITnoseに有利なDIV+CSS仕様まとめ次の記事：SEO_html/css_WEB-ITnoseに有利なDIV+CSS仕様まとめ

関連記事

続きを見る

• HTMLの知識のまとめ
• HTMLを早く学ぶ方法
• html xhtml xml の違い
• src 属性と href 属性の違い
• HTML5とCSSの置き換え利用について