CSSを使用して中央に固定された2つの列と適応型列を実現する方法

1. 絶対位置とマージンを使用する

この方法の原則は、左側と右側をドキュメントの流れから外れるように配置することです。中央の領域はそれらの下に自然に流れ、それらの余白値を設定します

この方法では、ページ要素構造の順序を自由に変更できます。ただし、先頭の値を処理しないと、位置がずれる可能性があるので注意してください。

html

<div id='コンテナ'>
    <div class='left'>左側</div>
    <div class='center'>中央</div>
    <div class='right'>右側</div>
</div>

＃容器 {
    位置: 相対的;
}
.左、.右{
    位置: 絶対;
    上: 0;
    幅: 200ピクセル;
    最小高さ: 500px;
    背景色: 赤;
}
。左 {
    左: 0;
}
。右 {
    右: 0;
}
。中心 {
    マージン: 0px 210px;
    最小高さ: 500px;
    背景色: 黄色;
}

2. フロートとマージンを使用する

この方法の原理は、左側と右側をフロートさせてドキュメントフローから外し、中央部分を通常のドキュメントフロー内にして、その余白値を設定することです。

この方法では、中央部分を最後に配置する必要があります。ウィンドウが特に小さい場合は、右側が圧迫されます。

html

<div id='コンテナ'>
    <div class='left'>左側</div>
    <div class='right'>右側</div>
    <div class='center'>中央</div>
</div>

＃容器 {
    位置: 相対的;
}
.左、.右{
    幅: 200ピクセル;
    最小高さ: 500px;
    背景色: 赤;
}
。左 {
    フロート: 左;
}
。右 {
    フロート: 右;
}
。中心 {
    最小高さ: 500px;
    マージン: 0px 210px;
    背景色: 黄色;
}

3. 聖杯レイアウト

この方法は最も一般的であり、3 つは相互に関連しており、最も堅牢です。

まず、真ん中の部分を前面に置き、容器の層で包みます。外側のコンテナにより画面全体の 100% を占め、左側、中央、右側はすべて float: left になります。中央の左余白と右余白を両側のコンテナの幅に余白を加えた値に設定し、左の margin-left を -100% に設定して左端に表示し、右の margin-right を -200px に設定して右端に表示します。

html

<div id='コンテナ'>
    <div class='center_wrap'>
        <div class='center'>中央</div>
    </div>
    <div class='left'>左側</div>
    <div class='right'>右側</div>
</div>

＃容器 {
    位置: 相対的;
}
.center_wrap、.left、.right{
    フロート: 左;
    最小高さ: 500px;
}
.center_wrap {
    幅: 100%;
}
.center_wrap .center{
    最小高さ: 500px;
    マージン: 0px 210px;
    背景色: 黄色;
}
.左、.右{
    幅: 200ピクセル;
    背景色: 赤;
}
。左 {
    左マージン: -100%;
}
。右 {
    左マージン: -200px;
}

4. CSS3 フレックス

html

<div id='コンテナ'>
    <div class='left'>左側</div>
    <div class='center'>中央</div>
    <div class='right'>右側</div>
</div>

＃容器 {
    幅: 100%;
    ディスプレイ: フレックス;
}
.左、.右{
    幅: 200ピクセル;
    背景色: 赤;
    最小高さ: 500px;
}
。中心 {
    フレックス: 1;
    最小高さ: 500px;
    マージン: 0 10px;
    背景色: 黄色;
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント

>>: JavaScript が Taobao の虫眼鏡効果を模倣