HTML+CSS的兩欄、三欄佈局以及垂直居中

這一次我想講解一下HTML+CSS的兩欄、三欄佈局以及垂直居中的實現方式。由於我的所學有限因此可能不會羅列出全部的實現方法，不過我會繼續努力查漏補缺。

1.兩欄佈局（左固定，右適應）

先寫出初始樣式和結構。

<div class="container">
    <div class="left">Lorem ipsum dolor sit amet</div>
    <div class="right">Lorem ipsum dolor sit amet</div>
</div>
div {
    height: 200px;
    color: #fff;
}

• float+margin實現方式

.left {
    float: left;
    width: 300px;
    background-color: #5616;
}
.right {
    width: 100%;
    margin-left: 300px;
    background-color: #438;    
}

• position實現方式

.left {
    position: absolute;
    left:  0;
    width: 300px;
    background-color: #5616;
}
.right {
    width: 100%;
    margin-left: 300px;
    background-color: #438;    
}

• flex

.container {
    display: flex;
}
.left {
    flex:  0 0 300px;
    background-color: #5616;
}
.right {
    flex:  1 1;
    background-color: #438;    
}

右固定，左適應同理。

2.三欄佈局

• float + margin方式

<div class="container">
    <div class="left">Lorem ipsum dolor sit amet</div>
    <div class="right">Lorem ipsum dolor sit amet</div>
    <div class="main">Lorem ipsum dolor sit amet</div>
</div>
div {
    height: 200px;
    color: #fff;
}
.main {
    width: 100%;
    margin-left: 300px;
    margin-right: 100px;
    background-color: #554;
}
.left {
    float: left;
    width: 300px;
    background-color: #5616;
}
.right {
    float: right;
    width: 100px;
    background-color: #438;    
}

• position實現方式

.main {
    width: 100%;
    margin-left: 300px;
    margin-right: 100px;
    background-color: #554;
}
.left {
    position: absolute;
    left: 0px;
    width: 300px;
    background-color: #5616;
}
.right {
    position: absolute;
    right: 0px;
    width: 100px;
    background-color: #438;    
}

以上這些實現方式，雖然實現了但還不夠好。由於main是主要的顯示區域，因此咱們應該先加載它再加載其它的地方。

• grid實現方式

.container {
    display: grid;
    grid-template-columns: 300px auto 100px;    //列的寬度
}
.main {
    grid-row: 1;    //第幾行
    background-color: #554;
}
.left {
    grid-row: 1;    //第幾行
    background-color: #5616;
}
.right {
    grid-row: 1;     //第幾行
    background-color: #438;    
}

• 聖盃佈局

.container {
    padding: 0 100px 0 300px;
    overflow： hidden;
}
.main {
    float: left;
    width: 100%;
    background-color: #554;
}
.left {
    position: relative;
    float: left;            
    width: 300px;
    left: -300px;
    margin-left: -100%;
    background-color: #5616;
}
.right {
    position: relative;
    float: left;
    right: -100px;
    margin-left: -100px;
    width: 100px;
    background-color: #438;    
}

• 雙飛翼佈局

<div class="container">
    <div class="wrap">
        <div class="main">Lorem ipsum dolor sit amet</div>
    </div>
    <div class="left">Lorem ipsum dolor sit amet</div>
    <div class="right">Lorem ipsum dolor sit amet</div>
</div>
div {
    height: 200px;
    color: #fff;
}
.wrap {
    float: left;
    width: 100%;
}
.main {
    margin: 0 100px 0 300px;
    overflow: hidden;
    background-color: #554;
}
.left {
    float: left;
    width: 300px;
    margin-left: -100%;
    background-color: #5616;
}
.right {
    float: left;
    width: 100px;
    margin-left: -100px;            
    background-color: #438;    
}

兩種佈局方式的不一樣之處在於如何處理中間主列的位置：

聖盃佈局是利用父容器的左、右內邊距+兩個從列相對定位；
雙飛翼佈局是把主列嵌套在一個新的父級塊中利用主列的左、右外邊距進行佈局調整

3.垂直居中

• position + margin實現（1）

<div class="container">
    <div class="content"></div>
</div>
.container {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #5465;
}
.content {
    position: absolute;
    left: 50%;
    top:  50%;
    width: 200px;
    height: 200px;
    margin-left: -100px;
    margin-top: -100px;
    background-color: #6465;
}

• position + margin實現（2）

.container {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #5465;
}
.content {
    position: absolute;
    left: 0;
    top:  0;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 200px;
    margin: auto;
    background-color: #6465;
}

• position + transform實現

.container {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #5465;
}
.content {
    position: absolute;
    left: 50%;
    top:  50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    background-color: #6465;
}

• flex實現

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 500px;
    height: 500px;
    background-color: #5465;
}
.content {
    width: 200px;
    height: 200px;
    background-color: #6465;
}

• inline-block實現

.container {
    display: inline-block;
    width: 500px;
    height: 500px;
    text-align: center;
    background-color: #5465;
}
.content {
    display: inline-block;
    width: 200px;
    height: 200px;
    vertical-align: middle;
    background-color: #6465;
}
.container::after{
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

效果都以下