6가지 클래식 CSS 3열 레이아웃 솔루션
- 小云云원래의
- 2017-12-04 13:32:5810387검색
CSS는 프런트엔드 개발 프로그래머에게 없어서는 안 될 언어입니다. CSS를 잘 익히면 프런트엔드 개발 작업이 크게 향상될 수 있습니다. 이 기사에서는 주로 고전적인 CSS 3열 레이아웃 체계를 소개하고 이를 모든 사람과 공유합니다.
3열 레이아웃은 이름에서 알 수 있듯이 양쪽이 고정되어 있고 가운데가 적응형입니다. 3열 레이아웃은 개발에서 매우 일반적입니다
1. 부동 레이아웃
가장 간단한 3열 레이아웃은 부동 소수점 레이아웃을 사용하는 것입니다. 먼저 왼쪽과 오른쪽 열을 그립니다:
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
</style>
<p class="container">
<p class="left"></p>
<p class="right"></p>
<p class="main"></p>
</p>
이때 왼쪽과 오른쪽 열의 분포를 얻을 수 있습니다:
다음으로 중간 열을 처리하는 방법을 살펴보겠습니다. 우리는 float 요소가 문서 흐름에서 벗어나고 다른 상자에서는 이 요소를 무시한다는 것을 알고 있습니다. (그러나 다른 상자의 텍스트는 여전히 이 요소를 위한 공간을 만들고 둘러쌉니다.) 따라서 이때 컨테이너 컨테이너에 일반 p만 추가하면 왼쪽과 오른쪽을 무시하고 전체 컨테이너를 채울 것입니다. 다만 게다가 여백은 왼쪽 오른쪽으로 공간이 흘러나온다:
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
margin-left: 120px;
margin-right: 120px;
}
.container {
border: 1px solid black;
}
<p class="container">
<p class="left"></p>
<p class="right"></p>
<p class="main"></p>
</p>
장점: 단순함
단점: 중간 부분이 마지막에 로드되어 콘텐츠가 많을 때 경험에 영향을 미친다.
2. BFC 규칙
BFC(블록 서식 컨텍스트) 규칙은 BFC가 부동 요소와 겹치지 않도록 규정합니다. 따라서 메인 요소를 BFC 요소로 설정하면:
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
overflow: hidden;
}
<p class="container">
<p class="left"></p>
<p class="right"></p>
<p class="main"></p>
</p>
3. 성배 레이아웃
성배 레이아웃의 핵심은 왼쪽, 중간, 오른쪽 열이 모두 float를 통해 부동된다는 것입니다. 그런 다음 음수 값을 통해 마진을 조정합니다.
첫 번째 단계는 기본 레이아웃을 살펴보는 것입니다
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
float: left;
width: 100%;
height: 200px;
background-color: blue;
}
</style>
<body>
<p class="container">
<p class="main"></p>
<p class="left"></p>
<p class="right"></p>
</p>
</body>
이때 보이는 효과는 왼쪽과 오른쪽 열이 두 번째 행으로 압착되는 것입니다. 이는 메인의 너비가 100%이기 때문입니다. 다음으로 왼쪽과 오른쪽 열의 여백을 조정하여 왼쪽, 가운데, 오른쪽을 한 줄에 넣습니다.
.left {
float: left;
width: 100px;
height: 200px;
margin-left: -100%;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
margin-left: -100px;
background-color: yellow;
}
두 번째 단계는 왼쪽 여백을 -100%로 설정하는 것입니다. 이번에는 왼쪽 열이 첫 번째 행의 시작 부분으로 이동합니다. 그런 다음 오른쪽의 왼쪽 여백을 너비의 음수 값인 -100px로 설정하면 오른쪽 열도 왼쪽 및 중간 열과 동일한 줄로 이동됩니다.
그러나 아직 끝나지 않았습니다. 우리는 메인에 텍스트를 추가하려고 합니다:
<body>
<p class="container">
<p class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</p>
<p class="left"></p>
<p class="right"></p>
</p>
</body>
텍스트가 표시되지 않는 것을 볼 수 있으며 다음에는 이 문제를 해결해야 합니다.
세 번째 단계는 컨테이너에 패딩을 제공하는 것입니다. 패딩은 왼쪽 및 오른쪽 열의 너비와 정확히 동일해야 합니다.
.container {
padding-left: 100px;
padding-right: 100px;
}
이 때 볼 수 있는 결과는 왼쪽, 중간 및 오른쪽 열은 전체적으로 모두 축소되었지만 텍스트는 여전히 표시되지 않습니다.
네 번째 단계는 왼쪽 및 오른쪽 열에 상대 레이아웃을 추가한 다음 왼쪽 및 오른쪽 값을 설정하여 바깥쪽으로 이동하는 것입니다.
.left {
float: left;
width: 100px;
height: 200px;
margin-left: -100%;
position: relative;
left: -100px;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
margin-left: -100px;
position: relative;
right: -100px;
background-color: yellow;
}
이제 끝났습니다.
4. Double Flying Wing 레이아웃
Double Flying Wing 레이아웃의 처음 두 단계는 성배 레이아웃과 동일하지만 중간 열의 콘텐츠가 차단되는 문제에 대한 해결책이 다릅니다. :
메인 부분의 콘텐츠가 차단되므로 메인 내부에 다른 콘텐츠를 추가하고 여백을 설정하여 가려짐을 방지하면 문제가 해결될 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.main {
float: left;
width: 100%;
}
.content {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: green;
}
.main::after {
display: block;
content: '';
font-size: 0;
height: 0;
clear: both;
zoom: 1;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: left;
margin-left: -200px;
background-color: blue;
}
</style>
</head>
<body>
<p class="main">
<p class="content"></p>
</p>
<p class="left"></p>
<p class="right"></p>
</body>
</html>
유일하게 주목할 점은 플로트를 지우려면 main 뒤에 요소를 추가해야 합니다.
5. Flex 레이아웃
Flex를 사용하여 3열 레이아웃을 구현하는 것도 매우 간단하지만 브라우저 호환성에 주의해야 합니다.
<style type="text/css">
.container {
display: flex;
flex-direction: row;
}
.middle {
height: 200px;
background-color: red;
flex-grow: 1;
}
.left {
height: 200px;
order: -1;
margin-right: 20px;
background-color: yellow;
flex: 0 1 200px;
}
.right {
height: 200px;
margin-left: 20px;
background-color: green;
flex: 0 1 200px;
}
</style>
</head>
<body>
<p class="container">
<p class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
<p class="left"></p>
<p class="right"></p>
</p>
</body>
있습니다. 몇 가지 참고 사항:
-
Main이 먼저 로드되면 먼저 작성해야 하지만 left는 맨 왼쪽에 표시되어야 하므로 left의 순서를 -1
으로 설정해야 합니다. flex 속성의 작성 방법은 flex: flex-grow flex-shrink flex-basis입니다. 이는 flex의 3열 레이아웃의 핵심이기도 합니다. 이는 flex-grow를 1로 설정합니다. 즉, 공간이 충분하지 않으면 왼쪽과 오른쪽 부분만 줄어듭니다. 동시에 왼쪽과 오른쪽 부분의 플렉스 기준이 지정되어 있기 때문에 두 부분의 폭을 늘려 디스플레이 효과를 보장합니다
6. 절대 위치 지정
절대 위치 지정 방법도 비교적 간단합니다. 본체를 먼저 로드할 수 있습니다:
<style type="text/css">
.container {
}
.middle {
position: absolute;
left: 200px;
right: 200px;
height: 300px;
background-color: yellow;
}
.left {
position: absolute;
left: 0px;
width: 200px;
height: 300px;
background-color: red;
}
.right {
position: absolute;
right: 0px;
width: 200px;
background-color: green;
height: 300px;
}
</style>
</head>
<body>
<p class="container">
<p class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
<p class="left"></p>
<p class="right"></p>
</p>
</body>
위 내용은 6가지 클래식 CSS 3열 레이아웃 계획에 관한 내용입니다. 모두에게 도움이 되기를 바랍니다.
관련 추천:
웹페이지 레이아웃을 할 때 HTML이나 CSS를 먼저 작성해야 하나요?
HTML 웹페이지 레이아웃에서 div와 span의 차이점은 무엇인가요?
위 내용은 6가지 클래식 CSS 3열 레이아웃 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!