HTML + CSS de dos columnas, diseño de tres columnas y centrado vertical

1. Diseño de dos columnas (fijo a la izquierda, adaptado a la derecha)

Escriba primero el estilo y la estructura inicial

<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. implementación de flotación + margen

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

2. implementación de la posición

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

3. flexionar

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

El derecho es fijo y el izquierdo se adapta por la misma razón.

Diseño de tres columnas

método de flotación + margen

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

implementación de la posición

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

Aunque estas implementaciones están implementadas, no son lo suficientemente buenas. Debido a que main es el área de visualización principal, debemos cargarlo primero y luego cargar otros lugares.

implementación de la red

.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. Centro verticalmente

Posición + realización de margen (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;
}