CSSで3カラムレイアウトを実現する4つの方法の例

まえがき

実際、3カラムレイアウトでも2カラムレイアウトでも、私たちは日常のプロジェクトでよく使用しますが、3カラムレイアウトが何なのか、2カラムレイアウトが何なのかを知らないかもしれません。 3 列レイアウトの 1 つまたは 2 つの方法を知っているかもしれませんが、実際の運用ではその 1 つの方法のみに頼ることになります。この記事では、3 列レイアウトの 4 つの方法を具体的に紹介します。使用シナリオ。

いわゆる3カラムレイアウトとは、ページを左、中、右の3つの部分に分割し、その真ん中の部分を適応させるレイアウト方法を指します。

1. 絶対配置方法

HTMLコードは次のとおりです:

<p class="left">Left</p>
<p class="main">Main</p>
<p class="right">Right</p>

CSSコードは次のとおりです:

//简单的进行CSS reset
body,html{
    height:100%;
    padding: 0px;
    margin:0px;
}
//左右绝对定位
.left,.right{
    position: absolute;
    top:0px;
    background: red;
    height:100%;
}
.left{
    left:0;
    width:100px;
}
.right{
    right:0px;
    width:200px;
}
//中间使用margin空出左右元素所占据的空间
.main{
    margin:0px 200px 0px 100px;
    height:100%;
    background: blue;
}

この方法には明らかな欠点があります。です, 中央の列に最小幅制限が含まれている場合、または幅を含む内部要素が含まれている場合、ブラウザの幅がある程度小さい場合、レイヤーの重なりが発生します。

2. 聖杯レイアウト

HTML コードは次のとおりです:

//注意元素次序
<p class="main">Main</p>
<p class="left">Left</p>
<p class="right">Right</p>

CSS コードは次のとおりです:

//习惯性的CSS reset
body,html{
    height:100%;
    padding: 0;
    margin: 0
}
//父元素body空出左右栏位
body {
    padding-left: 100px;
    padding-right: 200px;
}
//左边元素更改
.left {
    background: red;
    width: 100px;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -100px;
    height: 100%;
}
//中间部分
.main {
    background: blue;
    width: 100%;
    height: 100%;
    float: left;
}
//右边元素定义
.right {
    background: red;
    width: 200px;
    height: 100%;
    float: left;
    margin-left: -200px;
    position: relative;
    right: -200px;
}

関連する説明は次のとおりです。

(1) 真ん中の部分 ブラウザの幅の変化に合わせて変更する必要があるので、100% を使用します。ここでは、真ん中が 100% で、左側にフロートする必要があります。左右のレイヤーに移動する場所。100を超えると、左側が上に上がったことがわかりました。あまりにもマイナスでウィンドウから出る位置がないため、上に移動するしかありませんでした

(3) 2 番目のステップでは、ウィンドウの幅を左端と同じ幅になるように移動するだけでよいと結論付けることができます。 次に、負のマージンを使用して左右の列を配置します

(4) しかし、左と右の列は右側の列は中央の部分をブロックし、相対位置決め方法を使用し、それぞれが自分自身を基準にして外側に移動し、最終結果を取得します

3. 二重飛行翼のレイアウト

HTML コードは次のとおりです:

<p class="main">
    <p class="inner">
        Main
    </p>
</p>
<p class="left">Left</p>
<p class="right">Right</p>

CSS コードは次のとおりです:

//CSS reset
body,html {
    height:100%;
    padding: 0;
    margin: 0
}
body {
    /*padding-left:100px;*/
    /*padding-right:200px;*/
}
.left {
    background: red;
    width: 100px;
    float: left;
    margin-left: -100%;
    height: 100%;
    /*position: relative;*/
    /*left:-100px;*/
}
.main {
    background: blue;
    width: 100%;
    float: left;
    height: 100%;
}
.right {
    background: red;
    width: 200px;
    float: left;
    margin-left: -200px;
    height: 100%;
    /*position:relative;*/
    /*right:-200px;*/
}
//新增inner元素
.inner {
    margin-left: 100px;
    margin-right: 200px;
}

聖杯のレイアウトは実際には複雑に見え、タオバオでは、UED の議論の後、新しいレイアウト方法が登場しました。コードは上記のとおりです。 p をもう 1 つ追加すると、相対レイアウトの必要がなくなり、浮動マージンと負のマージンのみが使用されます。聖杯レイアウトとの違いが指摘されています。

4. フローティング

のHTMLコードは次のとおりです:

//注意元素次序
<p class="left">Left</p>
<p class="right">Right</p>
<p class="main">Main</p>

CSSコードは次のとおりです:

//CSS reset
body,html {
    height:100%;
    padding: 0;
    margin: 0
}
//左栏左浮动
.left {
    background: red;
    width: 100px;
    float: left;
    height: 100%;
}
//中间自适应
.main {
    background: blue;
    height: 100%;
    margin:0px 200px 0px 100px;
}
//右栏右浮动
.right {
    background: red;
    width: 200px;
    float: right;
    height: 100%;
}

このようにコードは次のようになります。簡潔で効率的な

更新 複数の CSS を使用して 3 列レイアウトを実装する 4 つの方法の例 関連記事については、PHP 中国語 Web サイトに注目してください。