부동 위치 지정 방법을 사용하면 고정 너비와 3개 열의 고정 너비를 포함하여 하나의 열에서 여러 열로의 적응을 기본적으로 쉽게 완료할 수 있습니다. 여기서는 왼쪽 열에 고정 너비가 필요하고 왼쪽에 표시되고, 오른쪽 열에 고정 너비가 필요하며 오른쪽에 표시되는 3열 레이아웃을 갖기를 희망하는 새로운 요구 사항이 제공됩니다. 열은 왼쪽 열과 오른쪽 열 사이에 있어야 합니다. 열의 중간은 왼쪽 열과 오른쪽 열 사이의 간격 변경에 따라 자동으로 조정됩니다.
이는 레이아웃에 대한 새로운 요구 사항을 제시하며, 이는 단순히 부동 속성 및 백분율 속성을 사용하여 달성할 수 없습니다. CSS는 현재 왼쪽 및 오른쪽 열이 차지하는 공간을 고려할 만큼 정확한 백분율 계산을 지원하지 않습니다. 가운데 열에 100% 사용 너비의 경우 왼쪽 열과 오른쪽 열 사이의 중간 간격 대신 브라우저 창의 너비를 사용하므로 이 문제를 다시 생각해 볼 필요가 있습니다.
절대 위치
이러한 3열 레이아웃을 시작하기 전에 새로운 위치 지정 방법인 절대 위치 지정에 대한 이해가 필요합니다. 이전의 부동 위치 지정 방법은 주로 브라우저가 객체의 내용에 따라 부동 방향을 자동으로 조정할 수 있도록 허용했지만, 이 방법이 위치 지정 요구 사항을 충족할 수 없는 경우 이를 달성하기 위해 CSS는 부동 위치 지정 외에 다른 방법을 제공해야 합니다. 위치 지정 방법은 위치 속성을 사용하여 달성되는 절대 위치 지정입니다.
위치는 객체의 위치 지정 방법을 설정하는 데 사용됩니다. 사용 가능한 값: 정적/절대/상대.
페이지의 모든 개체에 대해 기본 위치 속성은 정적입니다. 개체를 position:absolute로 설정하면 개체는 문서 흐름에서 벗어나 페이지 전체의 위치에 따라 재배치됩니다. 이 속성을 사용할 때 위쪽, 오른쪽, 아래쪽, 왼쪽, 즉 위쪽, 오른쪽, 아래쪽, 왼쪽 네 방향의 거리 값을 사용하여 개체의 구체적인 위치를 결정할 수 있습니다. 다음을 참조하세요. CSS:
#레이아웃 {
위치:절대;
상단:20px;
왼쪽:0px;
}
#layout이 position:absolute;를 사용하는 경우 절대 위치 지정 모드가 되며, top:20px;를 설정하면 항상 브라우저 창 상단에서 20px 떨어져 있게 됩니다. left:0px; 브라우저 창 상단에서 떨어져 있음을 의미합니다. 브라우저의 왼쪽 여백은 0px입니다. .
참고: 객체가 position:absolute로 설정되면 해당 객체의 위치 지정 모드는 다른 객체에 영향을 주지 않으며 어떤 의미에서는 절대 위치 지정에도 영향을 받지 않습니다. 위치를 지정하면 개체가 레이어처럼 웹페이지에 떠 있습니다.
개체가 절대적으로 배치된 후에는 페이지와의 부동 관계가 더 이상 고려되지 않으며 개체의 위쪽, 오른쪽, 아래쪽 및 왼쪽 방향 값만 설정하면 됩니다.
이 경우 절대 위치 지정을 사용하면 우리가 잘 제기한 문제를 해결할 수 있습니다. 마찬가지로 3개의 div를 사용하여 3개의 열 구조를 구성합니다.
#왼쪽 {
배경색: #E8F5FE;
테두리: 1px 솔리드 #A9C9E2;
높이: 400px;
너비: 200px;
위치: 절대;
상단: 0px;
왼쪽: 0px;
}
#오른쪽 {
배경색: #FFE7F4;
테두리: 1px 실선 #F9B3D5;
높이: 400px;
너비: 200px;
위치: 절대;
상단: 0px;
오른쪽: 0px;
}
이런 방식으로 왼쪽 열은 왼쪽 가장자리에 가깝게 표시됩니다: 0px;, 오른쪽 열은 오른쪽: 0px;로 표시되므로 오른쪽 열은 오른쪽에서 표시되고 #center는 중간에는 일반 CSS 스타일이 사용됩니다.
#센터 {
배경색: #F2FDDB;
테두리: 1px 솔리드 #A5CF3D;
높이: 400px;
오른쪽 여백: 202px;
왼쪽 여백: 202px;
}
#center의 경우 부동 방법을 설정할 필요가 없습니다. 왼쪽 여백만 두고 항상 #lef 및 #right의 너비를 유지하면 양쪽에서 202px의 적응형 너비가 달성됩니다. 왼쪽과 오른쪽의 적응 폭은 202px입니다. 거리는 #left 및 #right가 이 공간에 표시되도록 허용하므로 요구 사항을 충족합니다.