양쪽 고정 너비 가운데 맞춤:

직접 부호
첫 번째: 부동

.left-right-center > div {
    height: 100px;
}
.layout .left {
    float: left;
    width: 300px;
    background: red;
}

.layout .right {
    float: right;
    width: 300px;
    background: blue;
}

.layout .center {
    background: #000000;
}

"layout">
    
"left-right-center">
        
"left">
        
"right">
        
"center">
    

두 번째: 절대 포지셔닝

.layout .left-center-right > div {
    position: absolute;
    height: 100px;
}

.layout .left {
    left: 0;
    width: 300px;
    background: red;
}

.layout .center {
    left: 300px;
    right: 300px;
    background: #000000;
}

.layout .right {
    right: 0;
    width: 300px;
    background: blue;
}

"layout">
    
"left-center-right">
        
"left">
        
"center">
        
"right">
    

세 번째:flex 레이아웃

.left-center-right > div {
    height: 100px;
}

.left-center-right {
    display: flex;
}

.layout .left {
    width: 300px;
    background: red;
}

.layout .center {
    flex: 1;
    background: #000000;
}

.layout .right {
    width: 300px;
    background: blue;
}

"layout">
    
"left-center-right">
        
"left">
        
"center">
        
"right">
    

네 번째: 테이블 레이아웃

.left-center-right {
    width: 100%;
    display: table;
}

.left-center-right > div {
    display: table-cell;
    height: 100px;
}

.layout .left {
    width: 300px;
    background: red;
}

.layout .center {
    background: #000000;
}

.layout .right {
    width: 300px;
    background: blue;
}

"layout">
    
"left-center-right">
        
"left">
        
"center">
        
"right">
    

다섯 번째: 메쉬 레이아웃

.left-center-right > div {
    height: 100px;
}

.left-center-right {
    display: grid;
    width: 100%;
    grid-auto-rows: 100px;
    grid-template-columns: 300px auto 300px;
}

.layout .left {
    background: red;
}

.layout .center {
    background: #000000;
}

.layout .right {
    background: blue;
}

"layout">
    
"left-center-right">
        
"left">
        
"center">
        
"right">
    

1. 각 방안의 장단점은
부동: 부동이 문서 흐름에서 벗어나는 것을 제거하고 호환성이 좋습니다.
포지셔닝: 빠르고 문서 흐름에서 벗어나며 하위 요소도 문서 흐름에서 벗어납니다.
flex: 완벽하고 이동단이 많이 쓰여요.
표:호환성 좋음.
격자: 새로운 기술.
전재 대상:https://juejin.im/post/5bd2ac82e51d452700138db4