HTML+CSS的两栏、三栏布局以及垂直居中

摘要：因为个人所学有限所以可能不会罗列出所有的实现方法，不过我会继续努力查漏补缺。两栏布局左固定，右适应先写出初始样式和结构。因为是主要的显示区域，所以我们应该先加载它再加载其它的地方。

这一次我想讲解一下HTML+CSS的两栏、三栏布局以及垂直居中的实现方式。因为个人所学有限所以可能不会罗列出所有的实现方法，不过我会继续努力查漏补缺。

1.两栏布局（左固定，右适应）

先写出初始样式和结构。

    
Lorem ipsum dolor sit amet
    
Lorem ipsum dolor sit amet

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方式

    
Lorem ipsum dolor sit amet
    
Lorem ipsum dolor sit amet
    
Lorem ipsum dolor sit amet

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

双飞翼布局

    

        
Lorem ipsum dolor sit amet
    
    
Lorem ipsum dolor sit amet
    
Lorem ipsum dolor sit amet

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）

    


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

效果都如下