CSS에는 열 레이아웃을 구현하는 두 가지 방법이 있습니다. 첫 번째 방법은 4가지 CSS 위치 지정 옵션(절대, 정적, 상대 및 고정) 중에서 절대 위치 지정(절대 위치 지정)을 사용하는 것입니다. 이 옵션을 사용하면 문서의 요소를 원래 위치에서 제거하고 원하는 위치로 변경할 수 있습니다. 두 번째는 CSS에서 float 개념을 사용하는 것입니다.
기둥 효과를 얻기 위해 절대 위치 지정 또는 부동을 사용할 수 있습니다. 두 가지를 독립적으로 사용하거나 함께 결합하여 서로 보완할 수 있습니다.
1. 절대 위치 지정 절대 위치 지정의 장점은 모든 요소의 위치를 정확하게 제어할 수 있다는 것입니다. 추측이나 행운이 필요하지 않습니다. 절대 위치에 있는 요소는 흔적을 남기지 않고 일반 문서 흐름에서 완전히 제거되므로 다른 요소에 영향을 주지 않습니다.
그럼 절대 위치 지정을 사용하여 다음 레이아웃을 구현하는 방법을 시도해 보겠습니다.
이는 3열 레이아웃이며 중앙에 배치됩니다. 그 중 A열이 메인 콘텐츠 열이고, B열과 C열이 사이드 열입니다. 우선, 각 사람의 모니터 해상도가 다르기 때문에 절대 위치 지정을 직접 사용하여 A, B, C 세 열을 중앙 위치에 배치할 수 없습니다. 1024X768 해상도의 모니터에 위치 지정하면 중앙 위치 지정 효과가 나타납니다. 다른 해상도에서는 작동하지 않습니다. 고속 모니터에서 나타나는 효과는 확실히 중앙에 집중되지 않습니다. 그렇다면 이 문제를 해결하는 방법은 무엇입니까?
다행스럽게도 절대 위치 지정 모델에는 매우 유용한 기능이 있습니다. 즉, 절대 위치 지정 요소의 컨테이너도 위치 지정되면 해당 요소에서 지정한 위쪽 및 왼쪽 값은 루트 요소를 기반으로 하지 않습니다. 문서의 html(브라우저 창의 왼쪽 위 모서리이기도 함)이지만 오프셋은 해당 컨테이너의 왼쪽 위 모서리를 기준으로 계산됩니다. 즉, 위치가 지정된 컨테이너는 그 안에 있는 모든 요소의 절대 위치 지정을 위한 시작점 역할을 합니다.
따라서 이 기능을 사용하여 아래와 같이 열 A, B, C 외부에 컨테이너 D를 추가합니다.
그런 다음 컨테이너 D를 중앙에 배치하고 위치: 상대 속성을 추가합니다. 이러한 방식으로 절대 위치 지정을 사용하여 A, B, C의 위쪽 및 왼쪽 값을 배치합니다. A, B의 위치 , C는 컨테이너 D를 기반으로 합니다. 원하는 3열 센터링 효과를 얻을 수 있도록 왼쪽 상단 모서리의 위치가 계산됩니다.
그러나 일반적으로 사용되는 레이아웃은 아래와 같이 세 개의 열 외에 머리글과 바닥글도 필요합니다.
이때 절대 위치 지정 요소는 문서 흐름에서 완전히 제거되기 때문에 절대 위치 레이아웃을 사용하면 작동하지 않습니다. 이때 바닥글은 머리글 옆에 표시되고 머리글 아래에 표시됩니다.
절대 위치 지정을 사용해야 한다면 세 열 각각의 높이를 미리 알고 있어야 하며, 가장 높은 열을 기준으로 바닥글을 배치해야 합니다. 열의 텍스트 길이를 결정할 수 없는 경우 JavaScript를 사용하는 것 외에도 절대 위치 지정 아이디어를 포기하고 대신 플로팅 레이아웃을 수용하는 데 투자할 수 있습니다.
2. 플로팅
플로팅의 원래 의도는 기사에 삽입된 그림을 왼쪽이나 오른쪽으로 띄워서 그림 아래의 텍스트가 자동으로 그 주위를 감싸도록 하여 왼쪽이나 오른쪽에 큰 공백이 생기지 않도록 하는 것입니다. 그림의 오른쪽.
플로팅의 구문은 간단하지만 마스터하기가 그리 쉽지는 않습니다. 플로팅을 레이아웃에 사용하는 방법에 대한 예를 들어 보겠습니다. 마찬가지로 바닥글이 있는 3열 레이아웃을 구현하겠습니다. 아래와 같이:
이러한 효과를 얻기 위해 float를 사용하는 방법은 무엇입니까? 실제로는 매우 간단합니다.
1. E와 중앙 E의 너비를 설정합니다.
2. A, B, C의 너비를 설정하고 A, B, C를 각각 왼쪽으로 설정합니다.
3. 클리어를 설정합니다
.설명해야 할 것은 플로팅 레이아웃이 여전히 일반 문서 흐름을 따르므로 절대 위치 지정과 비교할 때 HTML 소스 파일의 요소 선언 위치는 플로팅 위치 지정 시 특히 중요하다는 것입니다
.
물론 이 문제를 해결하는 가장 간단한 방법은 소스 파일에서 왼쪽 열과 오른쪽 열의 선언 순서를 바꾸는 것입니다. 열의 순서를 바꾸지 않고 동일한 레이아웃을 구현하는 방법도 있습니다. 비교 사용 음의 여백 값을 사용하는 모호한 방법입니다. 일반적인 상황에서 사람들은 소스 파일의 왼쪽 열과 중간 열의 선언 순서를 바꾸는 것을 선택할 가능성이 높습니다.