CSS 웹 페이지 레이아웃 입문 강좌 4:2 열 고정 너비

한 열의 고정 폭 을 바탕 으로 두 열의 고정 폭 은 매우 간단 하 다.우 리 는 div 가 특정한 지역 에 대한 표지 에 사용 되 는 것 을 알 고 있다.두 열의 구 조 는 자 연 스 럽 게 두 개의 div 를 사용 해 야 한다.XHTML 코드 는 다음 과 같다

<div id="left">  </div>  
<div id="right">  </div> 

새로운 코드 구조 에서 두 개의 id 를 사 용 했 는데 각각 left 와 right 로 두 개의 div 의 이름 을 나타 낸다.우리 가 해 야 할 일 은..먼저 폭 을 정 한 다음 에 두 개의 div 를 수평 줄 에 나란히 표시 하여 2 열 식 구 조 를 형성 합 니 다.CSS 코드 는 다음 과 같 습 니 다.ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> [Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]left 와 right 두 div 의 코드 는 앞 과 유사 하 며 모두 같은 너비 와 높이 를 사용 합 니 다.이 예 에서 구분 하기 위해 왼쪽 열 과 오른쪽 열 은 각각 다른 테두리 와 배경 색 을 사 용 했 습 니 다.그리고 2 열 식 구 조 를 실현 하기 위해 우 리 는 새로운 속성 인 float 를 사용 했다.float 속성 은 CSS 레이아웃 에서 매우 중요 한 속성 입 니 다.제어 에 사용 되 는 유동 레이아웃 방식 입 니 다.우리 의 대부분 div 레이아웃 은 기본적으로 float 의 통 제 를 통 해 구 조 를 실현 합 니 다.float 의 선택 가능 한 매개 변 수 는 none/left/right 입 니 다.float 는 none 값 을 사용 할 때 대상 이 움 직 이지 않 음 을 나타 내 고 left 를 사용 할 때 대상 은 왼쪽으로 움 직 입 니 다.예 를 들 어 본 사례 의 div 는 float:left 를 사 용 했 습 니 다.이후 오른쪽 내용 은 현재 대상 의 오른쪽으로 흐른다.right 를 사용 할 때 대상 은 오른쪽으로 이동 합 니 다.left 의 float 값 을 right 로 설정 하면 left 대상 은 웹 페이지 오른쪽 으로 이동 합 니 다.right 대상 은 float:left 때 문 입 니 다.속성 이 웹 페이지 왼쪽으로 이동 합 니 다.이렇게 하면 간단 한 float 속성 을 사용 한 후에 2 열 고정 너비 만 완전 하 게 표시 할 수 있 습 니 다.구체 적 인 작업 절 차 는 다음 과 같다.새 페이지 에 div 를 삽입 하면 참고 할 수 있다.그리고 오른쪽 에 활성 화 된 드 롭 다운 목록 에서