Beispiele für vier Methoden zur Implementierung eines dreispaltigen Layouts mit CSS

Vorwort

Tatsächlich verwenden wir es oft in unseren täglichen Projekten, egal ob es sich um ein dreispaltiges oder ein zweispaltiges Layout handelt Sie wissen nicht, was ein Drei-Spalten-Layout ist. Was ist ein Zwei-Spalten-Layout, aber es wird bereits verwendet? Vielleicht kennen Sie eine oder zwei Methoden des Drei-Spalten-Layouts, aber im tatsächlichen Betrieb werden Sie sich nur darauf verlassen Eine Methode. In diesem Artikel wird das dreispaltige Layout im Detail vorgestellt. Vier Methoden und ihre Verwendungsszenarien.

Das sogenannte Drei-Spalten-Layout bezieht sich auf eine Layoutmethode, bei der die Seite in drei Teile unterteilt wird: links, in der Mitte und rechts, und dann wird der mittlere Teil angepasst.

1. Absolute Positionierungsmethode

Der HTML-Code lautet wie folgt:

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

Der CSS-Code lautet wie folgt:

//简单的进行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;
}

Diese Methode hat nämlich einen offensichtlichen Nachteil , wenn die mittlere Spalte eine Mindestbreitenbeschränkung enthält oder interne Elemente mit einer Breite von bis zu einem gewissen Grad klein sind, kommt es zu Ebenenüberlappungen.

2. Holy Grail Layout

Der HTML-Code lautet wie folgt:

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

Der CSS-Code lautet wie folgt:

//习惯性的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;
}

Die entsprechende Erklärung lautet wie folgt :

(1) Der mittlere Teil muss sich entsprechend der Änderung der Browserbreite ändern, daher werden 100 % verwendet. Hier werden der linke, mittlere und rechte Teil auf „Float“ eingestellt Da der mittlere Teil 100 % beträgt, haben die linke und rechte Ebene überhaupt keine Position Es war so negativ, dass kein Platz für das Fenster war, ich konnte es nur nach oben verschieben

(3) Drücken Sie Nein. Im zweiten Schritt dieser Methode kann daraus geschlossen werden, dass es nur benötigt wird um die Breite des Fensters zu verschieben, um die Position ganz links zu erreichen. Verwenden Sie negative Ränder, um die linke und rechte Spalte zu positionieren.

(4) Da jedoch die linke und rechte Spalte blockiert sind Es wird eine relative Positionierungsmethode verwendet, bei der sich jeder relativ zu sich selbst bewegt und das Endergebnis erhalten wird

3. Doppelte fliegende Flügelanordnung

HTML-Code lautet wie folgt:

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

CSS-Code lautet wie folgt:

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

Das Holy Grail-Layout scheint tatsächlich kompliziert und in Zukunft nicht sehr wartbar zu sein. Nach Gesprächen mit Taobao UED kam eine neue Layout-Methode heraus, nämlich das Double Flying Wing-Layout wie oben. Durch das Hinzufügen eines weiteren p entfällt die Notwendigkeit eines relativen Layouts und es werden nur gleitende und negative Ränder verwendet. Es wurden Unterschiede zum Holy Grail-Layout festgestellt.

4. Floating

HTML-Code lautet wie folgt:

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

Der CSS-Code lautet wie folgt:

//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%;
}

Auf diese Weise ist der Code prägnant, effizient genug und einfach zum Verstehen

Weitere Beispiele für vier Methoden zur Implementierung eines dreispaltigen Layouts mit CSS finden Sie auf der chinesischen PHP-Website!