CSS bietet mehrere Möglichkeiten, ein dreispaltiges Layout zu implementieren

Dieses Mal zeige ich Ihnen verschiedene Möglichkeiten, ein dreispaltiges Layout mit CSS zu implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung eines dreispaltigen Layouts mit CSS? .

Vorwort

Ob es sich um ein dreispaltiges oder ein zweispaltiges Layout handelt, wir verwenden es in unserem täglichen Leben oft Projekte. Vielleicht wissen Sie nicht, was ein Drei-Spalten-Layout ist. Aber vielleicht kennen Sie bereits eine oder zwei Methoden des Drei-Spalten-Layouts Verlassen Sie sich auf diese eine Methode. In diesem Artikel werden die vier Spaltenlayoutmethoden und deren Verwendungsszenarien vorgestellt.

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 PositionierungMethode

HTML-Code lautet wie folgt:

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

CSS-Code 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 weist einen offensichtlichen Nachteil auf: Wenn die mittlere Spalte eine Mindestbreitenbeschränkung enthält oder ein internes Element mit einer Breite vorhanden ist und die Browserbreite klein genug ist, Es kommt zu einer Ebenenüberlappung.

2. Holy Grail-Layout

HTML-Code lautet wie folgt:

//注意元素次序
<p class="main">Main</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空出左右栏位
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 relevanten Erklärungen lauten wie folgt:

(1) Der mittlere Teil muss sich entsprechend der Änderung der Browserbreite ändern, also 100 % Hier werden die linke, mittlere und rechte Ebene nach links verschoben. Da die mittlere Ebene 100 % beträgt, haben die linke und rechte Ebene überhaupt keine Position

(2) Nach minus 100 des Randes Ich habe festgestellt, dass die linke Ebene nach oben verschoben wurde, da sie so negativ ist, dass beim Verlassen des Fensters kein Platz mehr vorhanden ist. Daher kann ich sie nur nach oben verschieben

(3) Gemäß dem zweiten Schritt. Daraus kann geschlossen werden, dass nur die Breite des Fensters ganz nach links verschoben werden muss. Verwenden Sie negative Ränder, um die linke und rechte Spalte zu positionieren.

(4) Da jedoch die linke und rechte Spalte den mittleren Teil blockieren , wird die relative Positionierungsmethode verwendet, wobei sich jeder relativ zu sich selbst bewegt, und das Endergebnis wird erhalten

3. Doppelte fliegende Flügelanordnung

Der HTML-Code lautet wie folgt:

<p class="main">
    <p class="inner">
        Main
    </p>
</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 {
    /*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 sieht tatsächlich kompliziert aus und ist in Zukunft nicht sehr wartbar. Nach Gesprächen mit Taobao UED kam eine neue Layoutmethode heraus, nämlich das Double Flying Wing-Layout. Der Code ist 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>

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

Diese Codemethode ist präzise und effizient genug und leicht zu verstehen

Zusammenfassung

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Verwendung von HTML+CSS zur Implementierung des Dropdown-Menüs

Verwendung von CSS3 zur Implementierung eines leuchtenden quadratischen Rahmens
CSS zum Drehen des Symbols beim Bewegen der Maus nach oben

Das obige ist der detaillierte Inhalt vonCSS bietet mehrere Möglichkeiten, ein dreispaltiges Layout zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!