양쪽 넓이가 고정되고 중간 넓이가 스스로 적응하는 몇 가지 구조 방법

css로 페이지 레이아웃을 설정할 때, 결국은 페이지의 블록을 우리의 요구에 따라 배열하고 조합해야 한다.다음은 몇 가지 자주 사용하는 중간 적응, 양쪽 고정된 배치 방법이다.
1. flex 신축성 박스 레이아웃:
핵심: 부모 요소를 탄성 박스 레이아웃으로 설정합니다:display:flex;html 코드:

		
    
		
     ( flex     )
		
    
	

css 코드:

#father{
	display: flex;/*         */
	flex-wrap: nowrap; /*   */
	width: 100vw;
	height: 30vh;
	background-color: orange;
	text-align: center;
}
#son1{
	width: 200px;/*    */
	height: 30vh;
	background-color: yellow;
}
#son2{
	height:30vh;
	width: calc(100vw - 400px);
	background-color: pink;
}
#son3{
	width: 200px;/*    */
	height: 30vh;
	background-color: lightblue;
}

부동float
부모 요소는 위치를 설정하지 않으며, 세 열의 하위 요소는 모두 왼쪽 부동으로 설정됩니다.스스로 적응하는 열의 넓이를 계산해 보면 다음과 같다:calc(100vw(100% 창 넓이)-왼쪽 넓이-오른쪽 넓이).
html 코드:

		
   (float:left)
		
   （float:left）
		
   (float:left)
	

css 코드:

#dad{/*        ，     */
	width: 100vw;
	height: 30vh;
	background-color: orange;
	text-align: center;
}
#Left{
	float: left;
	width: 200px;
	height: 30vh;
	background-color: lightgreen;
}
#Center{
	float: left;
	width: calc(100vw - 400px);
	height: 30vh;
	background-color: grey;
}
#Right{
	float: left;
	height: 30vh;
	width: 200px;
	background-color: red;
}

3. 포지션 포지셔닝
핵심: 부모 요소를position:relative로 설정하기;(상대적 포지셔닝) 하위 요소를 절대 포지셔닝position:absolute로 설정합니다.왼쪽 열(고정 너비):position:absolute;left:0; 중간열(적응열):position:absolute;left: (왼쪽 열의 너비);right: (오른쪽 열의 너비) 오른쪽 열(고정 너비):position:absolute;right:0;
html 코드:

		
 absolute   
		
   (   relative，   absolute  )
		
 absolute   
	

css 코드:

#third{
	position: relative;/*         */
	width: 100vw;
	height: 40vh;
	background-color: orange;
	text-align: center;
}
#thirdone{
	position: absolute;/*       */
	left: 0;/*      0*/
	width: 200px;
	height: 40vh;
	background-color: blue;
}
#thirdtwo{
	position: absolute;/*       */
	left: 200px;/*            =        */
	right: 200px;
	height: 40vh;
	background-color: yellow;
}
#thirdthree{
	position: absolute;/*       */
	right: 0;/*      0*/
	width: 200px;
	height: 40vh;
	background-color: purple;
}