이전 글에서는 왼쪽(오른쪽)이 고정 너비이고 오른쪽(왼쪽)이 자동 크기 조정되는 2열 플로팅에 대해 썼습니다. 이번 글에서는 3열 플로팅 문제에 대해 이야기하겠습니다. 앞에서 언급했듯이 2열 부동은 다른 다중 열 부동의 기본입니다. 2열 부동의 원리를 이해하면 3개 이상의 열을 다중 열 부동으로 만드는 것이 간단해집니다.
왼쪽 가운데는 너비가 고정되어 있고 오른쪽은 가변형입니다.
왼쪽과 가운데가 모두 고정 너비이고 오른쪽만 가변형이기 때문에, 따라서 3열 부동소수점은 2열 부동소수점에서 왼쪽 고정 너비 및 오른쪽 적응형과 동일한 원리로 HTML 구조 코드는 다음과 같습니다.
그냥 CSS 스타일 코드를 두 개에 띄우면 됩니다 열 약간 변경:
#a{float:left; width:200px; background:#aaa;}
#b{float:left;
background:#f00;}
#c{배경:#777; margin-left:400px;}
물론 여기서 기억해야 할 한 가지는 b 객체에 왼쪽 부동 소수점을 부여해야 한다는 것입니다.
왼쪽은 적응형, 가운데 오른쪽은 고정폭입니다:
왼쪽 가운데는 고정폭과 동일하고 오른쪽은 적응형입니다. a, b, c 세 객체는 HTML 구조 코드의 순서를 변경합니다. 부동이 부동보다 먼저 오기 때문에 브라우저의 해석 순서는 c-b-a여야 합니다.
CSS 코드는 다음과 같습니다:
#a{배경:#aaa ;}
#b{float:오른쪽 너비:200px;
background:#f00;}
#c{float:right; width:200px; background:#777;}
왼쪽과 오른쪽의 너비는 고정, 가운데는 조정 가능:
이 레이아웃은 양쪽 사이드바의 너비가 고정되어 있고 중앙의 콘텐츠 영역이 적응형이기 때문에 가장 일반적으로 사용되는 레이아웃이어야 합니다. 이는 많은 웹사이트에서 일반적인 레이아웃 방법입니다. 많은 사람들이 레이아웃을 완성하기 위해 여기에서 4개의 DIV를 사용합니다. 즉,
중첩된 DIV를 사용하여 3열 플로팅 완료 , 이것은 실제로 부동 레이아웃의 목적을 달성할 수 있지만 이 중첩 없이도 여전히 3열 부동의 목적을 달성할 수 있습니다. 하나의 중첩을 생략할 수 있으므로 하나를 생략하는 것은 어떨까요? 목표를 달성하려면 b와 c의 순서를 바꾸면 됩니다.
CSS 코드는 다음과 같습니다.
#a{float:left; 너비:200px; 배경:#aaa;}
#b{여백-왼쪽:200px;
여백-오른쪽:200px; 배경:#f00;}
#c{float:오른쪽;
background:#777;}
이렇게 하면 2열 플로팅 레이아웃을 기반으로 3열 플로팅 레이아웃도 완성됩니다.
위 내용은 CSS 레이아웃 플로팅(2) 내용입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
