플로팅 위치를 사용하면 3 개의 열의 고정 너비를 포함하여 하나의 열에서 다중 열로 고정 너비와 적응성을 기본적으로 완료 할 수 있습니다. 여기서 우리는 왼쪽 열에 고정 너비가 필요하고 왼쪽에 표시되는 3 열 레이아웃을 기대하면서 새로운 요구 사항을 제시했습니다. 오른쪽 열에는 고정 너비가 필요하며 오른쪽에 표시됩니다. 열은 왼쪽 열에 있어야하며 열의 중간은 왼쪽 및 오른쪽 열의 간격 변경에 자동으로 적응해야합니다. 이것은 레이아웃에 대한 새로운 요구 사항을 제시하며, 단순히 Float 속성을 사용하고 CSS는 현재 100% 인 경우 백분율 계산을 지원하지 않습니다 너비의 중간 열에 사용되며 왼쪽과 오른쪽 열 사이의 중간 간격이 아닌 브라우저 창의 너비를 사용 하므로이 문제를 다시 생각해야합니다. #layout { #layout은 위치를 사용하여 동시에 절대 위치가됩니다. 왼쪽 여백은 0px입니다. . 이런 식으로 왼쪽 열은 왼쪽 가장자리의 왼쪽에 표시되며 오른쪽 열은 오른쪽으로 표시됩니다. 0px; #Center의 경우 더 이상 부동 방법을 설정할 필요가 없습니다. #Lef와 #Right의 폭을 항상 유지하기 위해 왼쪽 외부 마진이 필요합니다. 왼쪽 및 오른쪽 거리는이 공간에 #Left 및 #Right를 표시 할 수 있으므로 요구 사항을 달성 할 수 있습니다.
절대 포지셔닝
이러한 3 열 레이아웃을 시작하기 전에 새로운 포지셔닝 방법 인 절대 포지셔닝을 이해해야합니다. 이전의 부동 위치는 주로 브라우저에 의해 자동으로 조정되지만이 방법은 위치 요구 사항을 충족 할 수 없습니다 위치 속성을 사용하여 포지셔닝 및 절대 포지셔닝이 달성됩니다.
객체 위치 위치를 설정하는 데 사용 가능한 값을 설정하는 데 사용되는 위치 : 정적/절대/상대
페이지의 모든 객체에 대해 기본 위치 속성은 정적입니다. 객체를 위치로 설정하면 절대로 설정하면 객체가 문서 스트림에서 분리되고 전체 페이지의 위치에 따라 재배치됩니다. 이 속성을 사용하는 경우 상단, 오른쪽, 하단, 왼쪽, 즉 상단, 오른쪽, 하단 및 왼쪽의 거리 값을 사용하여 다음 CSS를 확인할 수 있습니다.
위치 : 절대;
상단 : 20px;
왼쪽 : 0px;
}
참고 : 객체가 위치로 설정된 경우 : 절대적으로 다른 객체와 분리되며 다른 물체의 부동 위치에 영향을 미치지 않습니다 절대 포지셔닝, 객체는 웹 페이지에 레이어처럼 부유합니다.
절대적으로 위치하면 객체는 더 이상 페이지의 부동 관계로 고려되지 않습니다.
이 경우 절대 포지셔닝을 사용하면 우리가 제기 한 문제를 해결할 수 있습니다. 마찬가지로 3 개의 DIV를 사용하여 세 가지 열 구조를 형성합니다.
#왼쪽 {
배경색 : #e8f5fe;
테두리 : 1px 고체 #a9c9e2;
높이 : 400px;
너비 : 200px;
위치 : 절대;
상단 : 0px;
왼쪽 : 0px;
}
#오른쪽 {
배경색 : #ffe7f4;
국경 : 1px 고체 #f9b3d5;
높이 : 400px;
너비 : 200px;
위치 : 절대;
상단 : 0px;
오른쪽 : 0px;
}
#center {
배경색 : #f2fddb;
테두리 : 1px 고체 #A5CF3D;
높이 : 400px;
마진 오른쪽 : 202px;
마진 왼쪽 : 202px;
}