CSS로 3열 레이아웃을 구현하는 세 가지 방법(코드 포함)
- 不言원래의
- 2018-08-09 11:15:031964검색
이 글은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.