집 >웹 프론트엔드 >CSS 튜토리얼 >CSS로 3열 레이아웃을 구현하는 세 가지 방법(코드 포함)

CSS로 3열 레이아웃을 구현하는 세 가지 방법(코드 포함)

不言원래의: 2018-08-09 11:15:032002검색

이 글은 CSS로 3열 레이아웃을 구현하는 세 가지 방법을 소개합니다. 참고할만한 가치가 있으니 도움이 필요한 분들에게 도움이 되었으면 좋겠습니다.

플로팅 레이아웃

은 세 개의 div로 나누어지고 다른 상위에는 float를 사용하여 이 세 개의 div가 포함됩니다.

참고: 세 개의 div, 왼쪽 --> 오른쪽 ---> 가운데 이렇게 주문하세요

<!DOCTYPE html>
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style type="text/css"> 
body {
   margin: 0;   
   padding: 0; 
   } 
    .left {   
             float: left;   
             width: 300px;   
             height: 100px;   
             background-color: red; 
         } 
     .right {   
            float: right;    
            width: 300px;   
            height: 100px;   
            background-color: blue; 
           } 
      .center {
               margin: 0px 300px 0px 300px;   
               background-color: black;   
               height: 100px; 
              } 
</style> 
</head> 
<body> 
<div class="father"> 
<div class="left">1</div> 
<div class="right">2</div> 
<div class="center">3</div> 
</div> 
</body> 
</html>

Flex

중간 상자 FLex를 1로 설정합니다. 이 경우 적응형 기본 가로 배열을 얻을 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.father {
  display: flex;
}
.left {
  width: 300px;
  height: 100px;
  background-color: red;
}
.center {
  flex:1;
  height: 100px;
  background-color: black;
}
.right {
  width: 300px;
  height: 100px;
  background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div> 
</body>
</html>

flex 관련 지식 포인트, 일반적으로 사용됨

1 디스플레이 설정: flex

2. 컨테이너 다이어그램:

Axis: 수평 주축 및 수직 교차 축

flex-direction: 주축 방향, 행 | 행-역방향 | 열-뒤집기; nowrap | Wrap-reverse;

flex-flow: flex-direction 및 flex-wrap의 약어

justify-content: 주축 정렬, flex-end 중심 | -around;

align-items: 횡축 정렬 방법, flex-start | flex-end | center | front-end 웹 페이지에서 탐색 모음을 중앙 정렬하는 방법

CSS 레이아웃이란 무엇입니까? 일반적인 CSS 레이아웃 방법(코드 포함)

위 내용은 CSS로 3열 레이아웃을 구현하는 세 가지 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：프런트 엔드 웹 페이지를 디자인할 때 탐색 모음을 중앙 정렬하는 방법(코드 테스트)다음 기사：프런트 엔드 웹 페이지를 디자인할 때 탐색 모음을 중앙 정렬하는 방법(코드 테스트)