왼쪽 너비 고정, 오른쪽 적응

HTML 구조
고정 너비 적응 너비

방법1: 왼쪽div를 부동으로 설정:float:left, 오른쪽div 너비는 자동으로 늘어나 적응

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}
.right {
    height: 200px;
    background-color: blue;
}
    ,        

방법2: 오른쪽:div에 대해 절대적인 위치를 정한 다음에 right=0을 설정하면 너비 적응을 실현할 수 있다.

절대 포지셔닝 요소의 첫 번째 고급 특성은 자동 신축 기능을 가진다는 것이다. width를 auto로 설정할 때(또는 설정하지 않으면 기본적으로 auto로 설정), 절대 포지셔닝 요소는 left와right에 따라 자동으로 크기를 신축한다.

.outer {
width: 100%;
height: 500px;
background-color: yellow;
position: relative;
}
.left {
width: 200px;
height: 200px;
background-color: red;
}
.right {
height: 200px;
background-color: blue;
position: absolute;
left: 200px;
top:0;
right: 0;
}

방법3: 왼쪽div를 절대적으로 포지셔닝한 다음 오른쪽div에margin-left:200px 설정

.outer {
width: 100%;
height: 500px;
background-color: yellow;
position: relative;
}
.left {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
.right {
height: 200px;
background-color: blue;
margin-left: 200px;
}

방법 4: flex 레이아웃 사용

.outer {
width: 100%;
height: 500px;
background-color: yellow;
display: flex;
flex-direction: row;
}
.left {
width: 200px;
height: 200px;
background-color: red;
}
.right {
height: 200px;
background-color: blue;
flex: 1;
}