CSS에서 3 열 레이아웃을 만드는 방법

머리글에 헤드 라인 태그 사용

머리글 행의 스타일을 결정하는 방법은 머리글 행의 내용에 따라 다릅니다. 헤더 행에 로고 그래픽과 헤드 라인이있는 경우 헤드 라인 태그 (

)를 사용하는 것이

. div 스타일과 같은 방식으로 헤드 라인의 스타일을 지정할 수 있으며, 외부 태그를 피할 수 있습니다.

헤더 행에 대한 HTML은 컨테이너 상단에 있으며 다음과 같이 보입니다.

내 헤더 행

그런 다음 스타일을 설정하기 위해 아래쪽에 빨간 테두리가 추가되어 끝나는 부분을 볼 수 있었고 여백과 여백은 0으로, 너비는 100 %로, 높이는 150px로 설정할 수 있습니다.

#container h1 { 여백 : 0; 패딩 : 0; 너비 : 100 %; 높이 : 150px; 왼쪽으로 뜨다; border-bottom : # c00 solid 3px; }

이 요소를 float : left;로 float하는 것을 잊지 마십시오. 재산. CSS 레이아웃을 작성하는 열쇠는 모든 것을 떠 다니는 것입니다. 심지어 컨테이너와 같은 너비의 것들까지도 떠 다니는 것입니다. 그렇게하면 요소가 페이지에서 어디에 놓여 있는지 항상 알 수 있습니다.

CSS 하위 클래스 선택기는 #container 요소 안에있는 H1 요소에만 스타일을 적용했습니다.

09 년 5 월

3 개의 열을 얻으려면 두 개의 열을 만들어야합니다.

CSS로 3 열 레이아웃을 만들 때 레이아웃을 2 개의 그룹으로 나눌 필요가 있습니다. 따라서이 3 열 레이아웃의 중간 및 오른쪽 열은 왼쪽 열이 250 픽셀이고 오른쪽 열이 610 픽셀 인 두 열 레이아웃에서 왼쪽 열 옆에 그룹화되고 왼쪽 열에 배치됩니다 (두 열에 대해 각각 300 열). , 그 (것)들 사이 시줄기를위한 10px 플러스).

HTML은 다음과 같습니다.

그 결과는 매우 중요합니다. 최소한의 체력을 발휘하기 위해서는 체력이 필요합니다. volreptate quis nostrud exercitation에서 reprehenderit에서 fufiat nulla parariatur. 그 결과는 매우 귀중한 결과를 낳습니다.

최소한의 노력으로, 최소한의 시간을 할애하십시오. Ut labore와 dolore magna aliqua. 혈류량은 혈소판 수치와 일치한다.

열에 자리 표시 자 텍스트를 추가하면 테스트 할 때 텍스트가 더 잘 보입니다. CSS는 다음과 같이 보입니다.

#container # col1 { 너비 : 250px; 왼쪽으로 뜨다; } #container # col2outer { 너비 : 610px; float : 오른쪽; 여백 : 0; 패딩 : 0; }

왼쪽에있는 열은 왼쪽으로 떠 있고 다른 열은 오른쪽으로 떠 있습니다. 두 열의 너비가 모두 860px이므로 두 열 사이에 10px 간격이 있습니다.

06 년 6 월

넓은 두 번째 열 내부에 두 개의 열 추가

세 개의 열을 만들려면 마지막 단계에서 컨테이너 열 안에 2 개의 div를 추가하는 것처럼 넓은 두 번째 열 안에 두 개의 div를 추가하십시오. HTML은 다음과 같습니다.

최소한의 노력으로, 최소한의 시간을 할애하십시오. Ut labore와 dolore magna aliqua. 혈류량은 혈소판 수치와 일치한다.

Nam libero tempore, quia voluptas aspernatur dicta sunt explicabo.Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque는 고객의 요청에 따라 달라질 수 있습니다.

그리고 CSS는 다음과 같습니다.

# col2outer # col2mid { 너비 : 300px; 왼쪽으로 뜨다; } # col2outer # col2side { 너비 : 300px; float : 오른쪽; }

두 개의 300px 크기의 두 상자가 610px 크기의 상자 안에 있기 때문에 두 상자 사이에 10px 간격이 있습니다.

07 09

바닥 글에 추가

이제 페이지의 나머지 부분에 스타일이 적용되었으므로 바닥 글에 추가 할 수 있습니다. "바닥 글"ID가있는 마지막 div를 사용하고 볼 수있는 내용을 추가하십시오. 맨 위에 테두리를 추가하여 시작할 위치를 알 수 있습니다.

HTML :

저작권 © 2017

CSS :

#container #footer {

왼쪽으로 뜨다;

너비 : 870px;

border-top : # c00 solid 3px;

} 08 년 9 월

귀하의 개인 스타일과 내용을 추가하십시오

레이아웃을 완료 했으므로 이제 자신 만의 스타일과 콘텐츠를 추가 할 수 있습니다. 머리글과 바닥 글의 테두리는 특별히 디자인이 아닌 레이아웃 섹션을 표시하기 위해 추가되었습니다.

09 09

최종 HTML / CSS

다음은 전체 문서, HTML 및 CSS입니다.

내 헤더 행

그 결과는 매우 중요합니다.

최소한의 노력으로.

Nam libero tempore.

저작권 © 2008