CSS 웹 페이지 레이아웃 소개 튜토리얼 8: 부동 중간 열 너비의 3개 열 Adaptive_Basic 튜토리얼

부동 위치 지정 방법을 사용하면 고정 너비와 3개 열의 고정 너비를 포함하여 하나의 열에서 여러 열로의 적응을 기본적으로 쉽게 완료할 수 있습니다. 여기서는 새로운 요구 사항이 제공됩니다. 기본의 왼쪽 열은 고정 너비가 필요하며 오른쪽에 표시됩니다. 중간 열은 왼쪽 열과 오른쪽 열 사이에 있어야 합니다. 오른쪽 열의 중간은 왼쪽 열과 오른쪽 열 사이의 간격 변경에 따라 자동으로 조정됩니다. 이는 레이아웃에 대한 새로운 요구 사항을 제시하며, 이는 단순히 부동 속성 및 백분율 속성을 사용하여 달성할 수 없습니다. CSS는 현재 왼쪽 및 오른쪽 열이 차지하는 공간을 고려할 만큼 정확한 백분율 계산을 지원하지 않습니다. %는 중간 열에 사용됩니다. 너비의 경우 왼쪽 열과 오른쪽 열 사이의 중간 간격 대신 브라우저 창의 너비를 사용하므로 이 문제를 다시 생각해 볼 필요가 있습니다.

절대 위치 지정
이러한 3열 레이아웃을 시작하기 전에 새로운 위치 지정 방법인 절대 위치 지정을 이해해야 합니다. 이전의 부동 위치 지정 방법은 주로 브라우저가 객체의 내용에 따라 부동 방향을 자동으로 조정할 수 있도록 허용했지만, 이 방법이 위치 지정 요구 사항을 충족할 수 없는 경우 이를 달성하기 위해 CSS는 부동 위치 지정 외에 다른 방법을 제공해야 합니다. 위치 지정 방법은 위치 속성을 사용하여 달성되는 절대 위치 지정입니다.

위치 개체의 위치 지정 방법을 설정하는 데 사용됩니다. 사용 가능한 값: 정적/절대/상대

페이지의 모든 개체에 대해 기본 위치 속성은 정적입니다.
객체가 position:absolute로 설정된 경우 전체 페이지의 위치에 따라 객체의 위치가 변경됩니다. 이 속성을 사용하면 위쪽, 오른쪽, 아래쪽, 왼쪽, 즉 거리 값을 사용할 수 있습니다. ​​​위쪽, 오른쪽, 아래쪽, 왼쪽 네 방향에서 개체의 특정 위치를 확인하려면 다음 CSS를 참조하세요.

#layout {
position:absolute; top:20px;
left:0px;
}
if# 레이아웃에서 position:absolute;를 사용하는 경우 동시에 top:20px;를 설정하면 절대 위치 지정 모드가 됩니다. 항상 브라우저 창 상단에서 20px 떨어져 있으며 left:0px는 브라우저의 왼쪽 여백에서 떨어져 있음을 확인합니다.

참고: 개체가 position:absolute;로 설정된 경우 해당 개체의 위치 지정 모드는 다른 개체에 영향을 주지 않으며 다른 개체의 부동 위치 지정에도 영향을 받지 않습니다. 즉, 절대 위치 지정을 사용한 후 개체가 레이어처럼 웹 페이지에 떠 있는 것입니다.

객체의 절대 위치가 지정되면 페이지와의 플로팅 관계는 더 이상 고려되지 않으며 객체의 위쪽, 오른쪽, 아래쪽 및 왼쪽 방향 값만 설정하면 됩니다.

이 경우 절대 위치 지정을 사용하면 우리가 잘 제기한 문제를 해결할 수 있습니다. 마찬가지로 3개의 div를 사용하여 3개의 열 구조를 구성합니다.

코드 복사 코드는 다음과 같습니다.

#left {
배경색: #E8F5FE;
테두리: 1px #A9C9E2; 높이: 400px;
위치: 절대값 ;
상단: 0px;
왼쪽: 0px;
#right {
배경색: #FFE7F4;
높이: 4 00px ;
너비: 200px;
위치: 절대;
상단: 0px;
오른쪽:
}


열은 왼쪽에서 왼쪽으로 표시됩니다. 0px; 오른쪽 열은 오른쪽으로 표시됩니다. 0px; 일반 CSS 스타일 사용:

코드 복사

코드는 다음과 같습니다.# center { background-color: #F2FDDB; border: 1px solid # A5CF3D;

height: 400px;

margin-left: 202px; }


Untuk #center, kita tidak perlu menetapkan kaedah terapungnya. Kita hanya perlu membiarkannya mempunyai jidar kiri dan sentiasa mengekalkan lebar #kiri dan #kanan Ini mencapai lebar penyesuaian 202px pada kedua-dua belah , dan jidar kiri dan kanan ialah Jarak antara kedua-dua belah hanya cukup untuk #kiri dan #kanan untuk dipaparkan dalam ruang ini, sekali gus mencapai keperluan.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Tiga lajur kiri dan kanan lebar tetap penyesuaian tengah-AA25.CN</title> <style> body{ margin:0px; } #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; height: 400px; width: 200px; position: absolute; top: 0px; left: 0px; } #center { background-color: #F2FDDB; border: 1px solid #A5CF3D; height: 400px; margin-right: 202px; margin-left: 202px; } #right { background-color: #FFE7F4; border: 1px solid #F9B3D5; height: 400px; width: 200px; position: absolute; top: 0px; right: 0px; } </style> <div id="left">Lajur kiri</div> <div id="center">Lajur tengah</div>