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

1. float+margin实现方式

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

2. position实现方式

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

3. flex

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

右固定，左适应同理。

三栏布局

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

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