CSS には 3 列レイアウトを実装する方法がいくつかあります-CSSチュートリアル-php.cn

CSS には 3 列レイアウトを実装する方法がいくつかあります

php中世界最好的语言

リリース： 2018-03-22 09:40:03

オリジナル

1975 人が閲覧しました

今回は CSS を使用して 3 列レイアウトを実装する方法をいくつか紹介します。 CSS を使用して 3 列レイアウトを実装するための注意事項は何ですか?実際の事例をいくつか紹介します。

はじめに

実際、3 列レイアウトであろうと 2 列レイアウトであろうと、私たちは日常のプロジェクトでよくそれを使用します。 2 列レイアウトとは何か、ということはよくわかりますが、実際には 3 列レイアウトの 1 つまたは 2 つの方法をすでに使用しているかもしれませんが、実際の操作ではその 1 つの方法のみをこの記事で紹介します。 3カラムレイアウトの概要と利用シーンを紹介します。

いわゆる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％なので、左と右のレイヤーはまったく上に移動する位置がありません

。 (2) 左レイヤーのマージンをマイナス 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;
}

ログイン後にコピー

Holy Grail のレイアウトは実際には複雑で、将来的にはあまり保守しにくいように見えます。淘宝 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%;
}

ログイン後にコピー

この方法では、コードは簡潔で十分に効率的で、理解しやすいです

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

HTML+CSSを使用してドロップダウンメニューを実装

CSS3を使用して明るい正方形の境界線を実装
CSSを使用してマウスアップアイコンの回転を作成

以上がCSS には 3 列レイアウトを実装する方法がいくつかありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。