7가지 오른쪽은 고정하고 왼쪽은 두 난간에 적응한다

참고 문장은 `오른쪽은 고정되고 왼쪽은 ``에 적응하는 두 난의 배치를 실현하는 7가지 방법을 실현하였다.최종 효과, 여기 보기https://hangforfreedom.github.io/some-cases/demo-4/demo.html.  
원 사례와 다른 것은 오른쪽`div`와 왼쪽`div`가 html 원본에서 쓴 선후 순서도 다르다.  
그래서 나는 오른쪽div를 두 종류로 나누었는데, 하나는 왼쪽div 위에 쓴 것이다.
top-right`, 하나는 왼쪽 div 뒤에 쓴 ``
bottom-right``.코드는 다음과 같습니다.

    
     /*     div  */
            div：top-right


            ：  div  20px，  div 200px





    
    

            div：left

                ，     。

             。     。     。     。     。     。     。
        

    
    
  /*     div  */
            div：bottom-right


            ：  div  20px，  div 200px





    

의 기본적인 양식은 두 상자의 거리가 ``20px`, 오른쪽 상자의 넓이가 `200px`, 왼쪽 상자는 스스로 적응하는 것이다.기본 CSS 스타일은 다음과 같습니다.

.wrapper{
    padding: 15px 20px;
    border: 1px solid #f60;
}


.left{
    margin-right: 20px;
    border: 5px solid #ddd;
}


.top-right,
.bottom-right{
    width: 200px;
    border: 5px solid #ddd;
}

아래의 코드는 이 기본 코드를 바탕으로 덮어쓰고 용기에 서로 다른 종류를 추가하여 효과를 실현하는 것이다.  

# 듀얼 inline-Block` 시나리오

.wrapper-inline-block{
    box-sizing: content-box;
    font-size: 0;   /*       */
}


.wrapper-inline-block .left,
.wrapper-inline-block .bottom-right{
    display: inline-block;
    vertical-align: top;    /*    */
    font-size: 14px;
    box-sizing: border-box;
}


.wrapper-inline-block .left{
    width: calc(100% - 225px);
}

이런 방법은 ``width:calc(100%-225px)``를 통해 왼쪽 상자의 폭을 동적 계산하는 것이다.``225px`는 왼쪽 상자와 오른쪽 상자의 거리, 그리고 오른쪽 상자의 구체적인 너비'(content+padding+border)`, 그리고 부모 용기의 너비를 계산하는'100%`에서 빼야 할 수치를 가리킨다.또한 왼쪽 상자의 넓이가'border''의 넓이를 포함하는지 알아야 한다.  
여기서 왼쪽 상자의 정확한 폭을 간단하게 계산하기 위해 하위 요소의'box-sizing:border-box;'그리고 부모 요소의'box-sizing: content-box;`.  
동시에, 두 개의 inline-block` 상자로서, 반드시 `vertical-align`을 설정해서 맨 윗부분을 맞추어야 한다.  
또한 계산된 폭을 정확하게 적용하기 위해서는'div''사이의 빈칸을 없애고 부모 용기의'font-size:0;'를 설정해야 한다.'html' 의 빈칸을 없애는 방법입니다.  
단점:
*오른쪽 상자의 너비, 두 상자의 거리를 알고 각 요소의'box-sizing'도 설정해야 한다.
*공백 문자의 영향을 제거해야 합니다.
*''vertical-align: top;`를 설정해야 합니다.위쪽 정렬을 충족합니다.  

# 더블`float`방안

.wrapper-double-float{
    overflow: auto;    /*    */
    box-sizing: content-box;
}


.wrapper-double-float .left,
.wrapper-double-float .bottom-right{
    float: left;
    box-sizing: border-box;
}


.wrapper-double-float .left{
    width: calc(100% - 225px);
}

본 방안은 쌍`inline-block` 방안과 원리가 같고 모두 동적 계산 폭을 통해 자체 적응을 실현한다.단, 부동하는'block''요소는 공간이 있는 상황에서 순서대로 한 줄에 붙어 있기 때문에''display: inline-block;`를 설정할 필요가 없습니다.자연스럽게 맨 끝 정렬, 공백 문자가 공간을 차지하는 등 문제가 줄어들었다.  
그러나 부동이 적용되었기 때문에 부모 요소는 부동을 제거해야 한다.  
단점:
*오른쪽 상자의 너비, 두 상자의 거리를 알고 각 요소의'box-sizing'도 설정해야 한다.
*부모 요소는 부동을 분명히 해야 합니다.

#`float+margin-right`방안

.wrapper-float{
    overflow: hidden;   /*    */
}


.wrapper-float .left{
    margin-right: 225px
}


.wrapper-float .top-right{
    float: right;
}

위의 두 가지 방안은 모두 CSS의 ``calc()` 함수를 이용하여 너비 값을 계산했다.다음 두 가지 방안은'block''급의 원소 상자의 넓이를 이용하여 부모 용기를 채우고 부모 용기의 넓이에 따라 적응하는 유동 특성을 가진다.  
그러나'block''급의 원소는 모두 한 줄을 독점하기 때문에 방법을 강구하여 두 개의'block'`를 한데 배열해야 한다.  
> 우리는'Block'''급의 원소는 부동하는 원소가 존재하지 않는다고 생각하지만,''inline'급의 원소는 부동하는 원소를 식별할 수 있다는 것을 안다.이렇게 하면, 'Block' 단계의 원소는 부동하는 원소와 한 줄에 있을 수 있다.  
이상은 원작자가 문장에서 해석한 것이다.그러나 나의 사례에서 나는 오른쪽`div`와 왼쪽`div`의 쓰기 순서를 바꾸려고 시도하여 오른쪽이 고정되고 왼쪽이 스스로 적응하는 효과를 실현하였다.그래서 코드의 종류는'top-right'이다.  
오른쪽 상자와 왼쪽 상자의 거리를 유지하기 위해서는 오른쪽 상자에 충분한 거리를 두어야 한다.이 거리의 크기는 오른쪽 상자의 너비와 두 상자 사이의 거리의 합이다.그리고 값을 왼쪽 상자의'margin-right'로 설정합니다.  
단점:
*부동 제거 필요
*왼쪽 상자의 `margin-right`를 계산해야 합니다.

#'absolute+margin-right'프로젝트 사용

두 개의'Block'`을 한데 배열하는 또 다른 방법은 오른쪽 상자에'position:absolute;''라는 절대적 위치를 정했다.이렇게 하면 왼쪽 상자도 그것을 무시할 수 있다.  

.wrapper-absolute{
    position: relative;
}


.wrapper-absolute .top-right{
    position: absolute;
    right: 20px;
}


.wrapper-absolute .left{
    margin-right: 225px;
}

물론 오른쪽 상자는 절대적인 위치를 사용한 후 위치를 조정해야 할 뿐만 아니라또한 부모 요소에 상대적인 위치를 지정합니다.이렇게 하면 왼쪽 상자와의 거리의 정확성을 보증한다.  
단점:
*절대 포지셔닝을 사용하면 부모 요소에서 상대 포지셔닝을 사용해야 한다``position:relative;``  
*쓰기 순서 변경, 오른쪽`div` 위 왼쪽`div` 아래

#`float+BFC` 스키마 사용

위의 방법은 모두 오른쪽 상자의 폭을 통해 어떤 값을 계산해야 하며, 아래의 세 가지 방법은 모두 계산할 필요가 없다.두 상자 사이의 간격만 설정하면 된다.  

.wrapper-float-bfc{
    overflow: auto;
}


.wrapper-float-bfc .top-right{
    float: right;
    margin-left: 20px;
}


.wrapper-float-bfc .left{
    margin-right: 0;
    overflow: auto;
}

이 방안 역시 왼쪽 부동을 이용했지만 왼쪽 상자는'overflow:auto;`를 통과했다.BFC를 형성하므로 왼쪽 상자는 부동 요소와 중첩되지 않습니다.  
이 경우 오른쪽의 부동 상자에'margin-left''만 설정하면 두 상자의 거리를 실현할 수 있다.왼쪽 상자는'block''급이기 때문에 너비가 스스로 적응할 수 있다.  
단점:
*부모 요소는 부동을 지워야 합니다.

#`flex`프로젝트

.wrapper-flex{
    display: flex;
    align-items: flex-start;
}


.wrapper-flex .bottom-right{
    flex: 0 0 auto;
}


.wrapper-flex .left{
    flex: 1 1 auto;
}

``flex``는 가장 좋은 방안이라고 할 수 있다. 코드가 적고 사용이 간단하다.  
주의해야 할 것은 ``flex` 용기의 기본 속성 값: `align-items:stretch; `.이 속성은 열의 높은 효과를 초래했다.  
두 상자의 높이를 자동으로 하기 위해서, ''align-items: flex-start;' 를 설정해야 합니다.  

#`grid`안

.wrapper-grid{
    display: grid;
    grid-template-columns: 2fr 200px;
    align-items: start;
}


.wrapper-grid .left,.wrapper-grid .bottom-right{
    box-sizing: border-box;
}


.wrapper-grid .bottom-right{
    grid-column: 2;
}


.wrapper-grid .left{
    grid-column: 1;
}

참고:
*`grid`` 레이아웃에도 열과 같은 높은 기본 효과가 있습니다.설정 필요:`align-items: start`
*`grid` 레이아웃은 또 하나의 주의할 점이 있다. ``flex`와 다르다. `margin-right`를 사용할 때 `grid` 레이아웃은 기본적으로 `box-sizing`이 설정한 박스 너비 사이의 위치이다.''flex''는 두 개의 div를 사용하는'border''또는'padding''바깥쪽 사이의 거리입니다.
내 블로그https://hangforfreedom.github.io/
링크:
*본문 참고문: 오른쪽 고정, 왼쪽 적응https://segmentfault.com/a/1190000010698609