HTML은 왼쪽은 고정 너비, 오른쪽은 적응형인 2열 레이아웃을 구현합니다.
구현 1:<style> body, html{padding:0; margin:0;} // CSS 위치 지정에 따라 부동 또는 절대 위치 지정을 사용하여 왼쪽 블록 요소를 일반 문서 흐름에서 분리하고 오른쪽 블록 요소 div와 병치할 수 있습니다. nth-of -type(1){ float: left; //부동 위치 사용: 절대 위치 지정 // top: 0; // left: 300px; 빨간색; } // [블록 수준 요소, 기본적으로 상위 요소의 너비를 자동으로 채워 한 줄 차지] // 현재: 오른쪽 블록 요소의 너비 = 상위 요소의 너비 div:nth-of-type(2){ // margin-left를 왼쪽 블록 요소 너비로 설정합니다. margin-left: 300px; // 현재: 오른쪽 블록 요소의 너비 = 상위 요소의 너비 - margin-left 높이: 220px background: blue; div> <div >div2</div></html>
1) margin-left 설정 전
2) margin-left 설정 후
구현 2:<style> body, html{padding:0; margin:0;} // CSS 위치 지정에 따라 부동 또는 절대 위치 지정을 사용하여 일반 문서 흐름에서 왼쪽의 블록 요소를 분리합니다. div:nth-of-type(1 ){ float : left; //부동 위치 사용: 절대 위치 // 위쪽: 0; // 왼쪽: 300px; FC는 일반(일반) 문서 스트림, 서식 지정 컨텍스트, 페이지의 렌더링 영역 및 렌더링 사양 집합입니다. BFC는 블록 수준 포맷팅 컨텍스트입니다. // BFC 블록 수준 서식 지정 컨텍스트를 사용하여 격리된 독립 컨테이너 만들기 div:nth-of-type(2){ // 오버플로 값을 표시되지 않도록 변경하여 BFC 오버플로: 숨겨진 높이: 220px 배경: 파란색; ; }</style><html> <div>div1</div> <div>div2</div></html>
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.