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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション

3週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法

2週間前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所

3週間前 By DDD

<🎜>：Dead Rails-すべての課題を完了する方法

4週間前 By DDD

Atomfall Guide：アイテムの場所、クエストガイド、およびヒント

1 か月前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7683

15

Java チュートリアル

1639

14

CakePHP チュートリアル

1393

52

Laravel チュートリアル

1286

25

PHP チュートリアル

1229

29

もっと見る