이중 비행 날개 레이아웃 (성배 레이아웃)

예를 들어 양쪽에 고정 된 너비 (각각 200px)를 실현하면 중간은 브라우저의 뷰포트 크기에 따라 조정됩니다.이 레이아웃을 이중 비행 레이아웃 또는 성배 레이아웃이라고합니다. 이것은 특정 보물의 레이아웃입니다.
1. 최상의 호환성을 얻으려면 float를 사용하십시오. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <head>
        <style>
           .content{
             width: 100%;
             min-width: 600px;
             padding: 0 200px;
             box-sizing: border-box;
           }
           .content div{
               float: left;
           }
           .center{
               width: 100%;
               background: blueviolet;
           }
           .left,.right{
               width: 200px;
           }
           .left{
               background:pink;
               margin-left: -200px;
           }
           .right{
               background:yellow;
               margin-right: -100%;
           }
         
        </style>
    </head>
    <div class="content">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>

    <body>
    
    </body>
</html>

효과는 다음과 같습니다. 여기에 사진 설명 삽입
2. 간단한 플렉스 레이아웃을 사용하여 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <head>
        <style>
            *{
             padding: 0;
             margin: 0;
             border: 0;
            }
           .content{
             width: 100%;
             display: flex
           }
           .center{
             flex-grow: 1;
             background: blueviolet;
            }
            .left{
                background:pink;
                flex-basis: 200px;
             }
            .right{
                flex-basis: 200px;
                background:yellow;
            }
        </style>
    </head>
    <div class="content">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
    <body>
    
    </body>
</html>

이중 비행 날개 레이아웃 (성배 레이아웃)

추천