CSS 2열 레이아웃 구현 방법 요약 공유

이 글은 주로 CSS 2단 레이아웃 구현 방법을 요약하고, 절대+마진, 부동소수점+마진 방식 등 몇 가지 실무와 이슈에 대해 논의합니다. 필요한 친구는

2단 레이아웃을 참고하세요. 아마도 가장 고전적인 웹 페이지 레이아웃 방법일 것입니다. 이 블로그에서는 이 레이아웃을 사용합니다. 2열 레이아웃에서는 기본 열(기본)에 적응형 너비가 있고 하위 열(사이드바)에 고정 너비가 있는 것이 가장 일반적입니다.
오늘은 고정 너비 + 적응형 2열 레이아웃을 구현하는 방법에 대해 논의해 보겠습니다.

1.절대 + 마진 방식

가장 먼저 떠오르는 것은 절대 + 마진 방식을 사용하는 것입니다. 먼저 코드를 살펴보겠습니다.

<p class="container">
    <p class="sidebar">子列</p>
    <p class="main">主列</p>
</p>

.container {   
 position: relative;   
}   
.sidebar {   
 position: absolute;   
 top: 0;   
 left: 0;   
 width: 200px;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.main {   
 height: 300px;   
 margin-left: 210px;   
 background-color: rgba(0, 255, 0, .5);   
}

이 메서드는 위치를 사용하여 문서 흐름에서 사이드바 열을 가져온 다음 기본 열의 왼쪽 여백을 사용하여 제거합니다. 사이드바 열로 덮힌 부분. 이러한 방식으로 고정 너비 + 적응형 2열 레이아웃을 달성했습니다.

(1) 열 순서 조정

HTML을 수정하지 않고 CSS만 수정하면 왼쪽과 오른쪽 열의 순서를 바꿀 수 있습니다. 코드 참조:

.sidebar {   
 position: absolute;   
 top: 0;   
 rightright: 0;   
}   
.main {   
 margin-right: 210px;   
}

(2) 메인 컨텐츠 컬럼이 먼저 표시됩니다

좀 더 완벽하게 생각해보자 메인 컬럼을 사이드바에 넣을 수 있을까요? 기본 콘텐츠가 먼저 로드되고 렌더링되도록 열 앞에 배치합니까? 시도해 보자!

<p class="container">
    <p class="main">主列</p>
 <p class="sidebar">子列</p>
</p>

위의 간단한 조정만 하면 CSS 수정이 필요하지 않습니다!

(3) 문제점

이 방법은 장점이 많지만 치명적인 단점이 있다. 사이드바 열이 문서 흐름과 분리되어 있기 때문에 사이드바 열이 메인 열보다 높을 때 후속 레이아웃인 문제 데모를 다루게 됩니다.
컨테이너 컨테이너에 Overflow:hidden을 추가하면 사이드바의 오버플로 부분이 잘립니다. 이 레이아웃에서는 실제로 이 문제에 대한 효과적인 해결책이 없습니다.

2. Float + 마진 방식

그럼 2열 레이아웃을 구현하기 위한 float + 마진이 먼저 떠오르네요. 왼쪽 열의 너비는 고정되어 있습니다. 주요 콘텐츠는 적응형입니다. 코드는 다음과 같습니다.

<p class="sidebar">子列</p>
<p class="main">主列</p>

rrree

이 구현 방법은 비교적 간단합니다. 먼저 하위 열을 왼쪽으로 띄운 다음 기본 열에 margin-left를 설정하여 표시 공간을 남겨둡니다. 하위 열의 경우.

그렇다면 이 방법은 열 위치 교환을 지원합니까? 확신하는. CSS 코드는 다음과 같습니다.

.sidebar {   
 float: left;   
 width: 200px;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.main {   
 height: 300px;   
 margin-left: 210px;   
 background-color: rgba(0, 255, 0, .5);   
}

문제:

float + margin 방식이 좋은 방법인 것 같은데 앞서 언급한 메인 컬럼은 먼저 표시됩니다. 최적화를 달성할 수 없습니다.

3. float + 음수 여백 방식

더 이상 고민하지 말고 바로 코드로 넘어가겠습니다.

.sidebar {   
 float: rightright;   
 width: 200px;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.main {   
 height: 300px;   
 margin-right: 210px;   
 background-color: rgba(0, 255, 0, .5);   
}

rrree

여러분 알아야 할 이중 날개 레이아웃으로 메인 컬럼이 먼저 표시되는 것을 볼 수 있습니다. 구현 과정은 다음과 같습니다.

먼저 메인 열과 사이드바 열을 띄운 다음 음수 여백을 통해 사이드바 열의 위치를 ​​올바르게 지정합니다.
기본 열을 p에 중첩하고 p의 너비 값을 100%로 설정합니다.
마지막으로 메인 열의 왼쪽 여백을 설정하여 사이드바로 가려진 부분을 제거합니다.

위 내용은 CSS 2열 레이아웃 구현 방법 요약 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!