페이지의 다양한 열 레이아웃에 대한 CSS 구현 예

이 글에서는 CSS를 활용하여 1열 레이아웃, 2열 레이아웃, 3열 레이아웃을 구현하는 방법의 예시를 주로 소개하며, 적응형 너비와 높이의 예시도 도움이 필요한 친구들은 다음을 참고하세요.

1. 1열 레이아웃(단일 열 레이아웃이라고도 함)
1열 레이아웃에는 블록 수준 요소와 행 수준 요소를 포함하는 표준 문서 흐름이라는 3가지 지식 포인트가 필요합니다. , 마진 속성과 마찬가지로 열 레이아웃을 구현하는 핵심 코드는 마진 속성으로 구현됩니다. 브라우저의 너비에 맞춰 여백을 설정하려면 먼저 여기의 div와 같은 상자 모델이 있어야 하며, 길이와 너비를 고정된 크기로 설정하여 중앙에 배치해야 합니다.

<style type="text/css">
    body{margin:0;padding:0;}
    .head{heigth:200px;background:blue;}
    .main{height:500px;width:800p;margin:0 auto;}
    .footer{background:blue;height:200px;width:800px;margin:0 auto;}
</style>
<div class="head"> This is head !</div>
<div class="main"> This is main !</div>
<div class="footer"> This is footer !</div>

2. 2열 레이아웃(2열 적응형)
플로팅:
블록 수준 요소는 행 단위로 정렬되며 두 블록 수준 요소는 나란히 배치할 경우 CSS에서 부동 레이아웃을 사용해야 합니다. 부동에는 세 가지 속성 값이 있습니다.
부동 속성이 설정되면 요소는 왼쪽 부동, 오른쪽 부동, 없음입니다. 컨테이너 가장자리에 닿을 때까지 왼쪽이나 오른쪽으로 이동합니다.
요소에 콘텐츠가 없지만 플로팅 속성이 설정된 경우 콘텐츠 변경에 따라 요소의 너비가 변경됩니다.
float를 지우는 일반적인 방법은 다음과 같습니다. (지워야 하는 요소에 대해 설정) 어떤 종류의 float가 설정되어 있는지 명확하게 알면 clean: right/left도 사용할 수 있습니다. 부동 소수점을 지우는 또 다른 방법이 있습니다. width:100%;overflow:hidden;

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:20%;height:500px;background:blue;float:left;}
    .right{width:80%;background:red;height:500px;float:right;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="right"> This is right !</div>
</div>

상위 div를 추가한 후 오른쪽 및 왼쪽 블록은 상위 블록으로 제한됩니다. 부모 블록의 너비는 고정되어 있으므로 왼쪽 및 오른쪽 블록의 너비도 고정됩니다. 그러나 부모 블록의 너비가 변경되면 왼쪽 및 오른쪽 블록도 그에 따라 변경되며 비율은 그대로 유지됩니다. 2:8로 고정되어 있습니다.

3. 3열 레이아웃
위치는 4가지 속성 값을 설정할 수 있습니다. 즉, 정적(정적 위치 지정), 상대적(상대적 위치 지정), 절대(절대 위치 지정), 고정( 고정 위치 지정)
3열 레이아웃 적응의 경우 위의 2열 레이아웃의 비율을 33.33%로 변경하면 됩니다. 그러면 비유적으로 4열 레이아웃 적응도 동일한 방법을 사용하여 비율 분포를 조정할 수 있습니다. 따라서 원하는 레이아웃을 얻으십시오.

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:33.33%;height:500px;background:blue;float:left;}
    .middle{width:33.33%;height:500px;background:black;float:left;}
    .right{width:33.33%;background:red;height:500px;float:right;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="middle"> This is middle !</div>
    <div class="right"> This is right !</div>
</div>

또 다른 상황은 왼쪽 블록과 오른쪽 블록의 너비가 각각 200px과 300px로 고정되어 있고 가운데는 적응형이라는 것입니다. 이 경우에는 float를 통해 달성할 수 없습니다. 이때 왼쪽 및 오른쪽 블록을 절대적으로 배치한 다음 요구 사항을 달성하기 위해 중간 블록의 여백을 설정해야 합니다. 중간과 왼쪽, 오른쪽 조각이 서로 촘촘하게 맞지 않도록 하려면 여백(상단, 오른쪽, 하단, 왼쪽)을 설정할 때 픽셀을 적절하게 늘리면 됩니다. 구현 방법은 다음과 같습니다.
참고 left:0;top:0;right:0;top:0; 이 설정을 추가하지 않으면 개인 테스트

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:200px;height:500px;background:blue;position:absolute;left:0;top:0;}
    .middle{height:500px;background:black;margin:0 300px 0 200px;}
    .right{width:300px;background:red;height:500px;position:absolute;right:0;top:0;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="middle"> This is middle !</div>
    <div class="right"> This is right !</div>
</div>

에서 문제가 발생합니다. 웹 디자인에서는 1열 레이아웃의 메인 블록에 2열 또는 3열 레이아웃을 삽입하는 등 위의 레이아웃 방법을 주로 혼합합니다. 코드는 기본적으로 위와 같습니다

BFC 원리를 사용하여 구현
BFC 규칙 중 하나는 BFC 영역이 플로트 상자와 겹치지 않는다는 것이므로 이를 사용하여 3열 레이아웃을 구현할 수 있습니다.

css 코드는 다음과 같습니다

.left {   
  float: left;   
  margin-right: 10px;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
}   
.rightright {   
  float: rightright;   
  margin-left: 10px;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
}   
.main {   
  height: 100px;   
  background-color: green;   
  overflow: hidden;   
}

html 코드는 다음과 같습니다

<div class="left"></div>  
<div class="right"></div>  
<div class="main"></div>

이중 비행 날개 레이아웃
이 레이아웃 구성표는 다음과 같습니다. 주로 타오바오의 주요 목적인 컬럼을 먼저 로드할 수 있습니다.
구현 원리:
(1) 메인 컬럼 외부에 랩을 추가하고 메인 컬럼을 랩한 후 두 개의 서브 컬럼을 왼쪽으로 띄웁니다.
(2) 메인 컬럼의 줄바꿈 ​​너비를 100%로 설정하고, 서브 컬럼의 왼쪽 여백을 음수 값으로 설정하여 서브 컬럼이 좌우로 정렬될 수 있도록 합니다.
(3) 메인 컬럼의 왼쪽 여백과 오른쪽 여백이 왼쪽 컬럼과 오른쪽 컬럼의 너비보다 조금 더 크기 때문입니다. 메인 컬럼과 서브 컬럼 사이의 간격을 설정할 수 있습니다.

css 코드는 다음과 같습니다

.wrap {   
  width: 100%;   
}   
.wrap::after {   
  display: block;   
  content: '';   
  font-size: 0;   
  height: 0;   
  clear: both;   
  zoom: 1;   
}   
.main-content {   
  float: left;   
  width: 100%;   
}   
.main {   
  height: 100px;   
  background-color: green;   
  margin-left: 110px;   
  margin-right: 110px;   
}   
.left {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100%;   
}   
.rightright {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100px;   
}

html 코드는 다음과 같습니다

<div class="wrap">  
  <div class="main-content">  
    <div class="main"></div>  
  </div>  
  <div class="left"></div>  
  <div class="right"></div>  
</div>

성배 레이아웃
성배 레이아웃은 구조가 더 간단하고 소유자가 열을 먼저 로드할 수 있습니다.
구현 원리:
(1) 래핑 상자를 추가하고 padding-leftpadding-right 값을 설정하고 한 간격의 너비를 하위 열 너비보다 크게 설정합니다.
(2) 메인 열과 하위 열은 float: left로 설정되고, 왼쪽 하위 열의 왼쪽 여백은 -100%로 설정되고, position:relative left: -110px로 설정됩니다. 왼쪽 하위 열을 왼쪽으로 이동합니다. 오른쪽 열도 마찬가지입니다.
(3) 메인 컬럼의 너비는 100%로만 설정하면 됩니다. 소포 상자의 너비를 100%로 설정하지 말고 그냥 조정하세요.

css 코드는 다음과 같습니다

.wrapper {   
  padding-left: 110px;   
  padding-right: 110px;   
  overflow: hidden;   
}   
.main {   
  float: left;   
  width: 100%;   
  height: 100px;   
  background-color: #ccc;   
}   
.left {   
  float: left;   
  width: 100px;   
  height: 100px;   
  margin-left: -100%;   
  position: relative;   
  left: -110px;   
  _left: 0;   
  background-color: orange;   
}   
.rightright {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100px;   
  position: relative;   
  rightright: -110px;   
}

html 코드는 다음과 같습니다

<div class="wrapper">  
  <div class="main"></div>  
  <div class="left"></div>  
  <div class="right"></div>  
</div>