CSS로 3열 레이아웃을 구현하는 방법은 무엇입니까? 3열 레이아웃을 구현하는 3가지 방법(코드 예시)
- 青灯夜游앞으로
- 2018-10-24 16:29:198561검색
이 글의 내용은 CSS로 3열 레이아웃을 구현하는 방법을 소개하는 것인가요? 3열 레이아웃을 구현하는 3가지 방법(코드 예시) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
3열 레이아웃은 양쪽에 있는 두 열의 너비가 고정되어 있고 가운데 열의 너비는 조정 가능함을 의미합니다.
일반적으로 사용되는 세 가지 방법:
Positioning
Floating
유연한 상자 레이아웃
Positioning 방법
가장 직관적이고 이해하기 쉽습니다. 방법에서 절대 위치 지정을 선택합니다. 왼쪽 및 오른쪽 열, 페이지 양쪽에 고정, 중간 본문은 여백을 사용하여 위치를 결정하도록 선택
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位方法创建三列布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 500px;
background-color: yellow;
position: absolute; /* 绝对定位，使位置固定 */
left: 0;
top: 0;
}
.center{
height: 600px;
background-color: purple;
margin: 0 300px 0 200px; /* 通过外边距确定宽度 */
}
.right{
width: 300px;
height: 500px;
background-color: red;
position: absolute; /* 绝对定位，使位置固定 */
right: 0;
top: 0;
}
</style>
</head>
<body>
<div>Left</div>
<div>Center</div>
<div>Right</div>
</body>
</html>
Result
Floating 방법
왼쪽과 오른쪽 부분을 띄우고 문서 흐름에서 벗어난 후 여백을 사용하여 중간 부분에 적응
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动法创建三列布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 500px;
background-color: yellow;
float: left;
}
.center{
height: 600px;
background-color: purple;
margin: 0 300px 0 200px;
min-width: 100px; /* 最小宽度，防止浏览器缩小后中间部分被隐藏 */
}
.right{
width: 300px;
height: 500px;
background-color: red;
float: right;
}
</style>
</head>
<body>
<div>Left</div>
<div>Right</div>
<div>Center</div> <!-- 左右部分脱离文档流，中间部分平铺 -->
</body>
</html>
유연한 상자 레이아웃
컨테이너를 사용하여 세 개의 열을 감싸고, 컨테이너의 표시를 왼쪽과 오른쪽으로 설정합니다. 부분은 고정으로 설정하고 가운데 플렉스는 1로 설정하고 왼쪽과 오른쪽 값은 고정해서 가운데는 적응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性盒子创建三列布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
}
.left{
width: 200px;
height: 500px;
background-color: yellow;
}
.center{
height: 600px;
flex: 1;
background-color: purple;
}
.right{
width: 300px;
height: 500px;
background-color: red;
}
</style>
</head>
<body>
<div>
<div>Left</div>
<div>Center</div>
<div>Right</div>
</div>
</body>
</html>위 내용은 CSS로 3열 레이아웃을 구현하는 방법은 무엇입니까? 3열 레이아웃을 구현하는 3가지 방법(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제