Home > Article > Web Front-end > How to implement three-column layout with CSS? 3 ways to implement a three-column layout (code example)
How to implement three-column layout with CSS? 3 ways to implement a three-column layout (code example)
- 青灯夜游forward
- 2018-10-24 16:29:198543browse
The content of this article is to introduce how to implement three-column layout with CSS? 3 ways to implement a three-column layout (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Three-column layout refers to the fixed width of the two columns on both sides, and the width in the middle is adaptive.
Three commonly used methods:
Positioning
Floating
Elasticity Box layout
Positioning method
The most intuitive and easy-to-understand method is to select absolute positioning for the left and right columns and fix them on both sides of the page. On the side, the middle body chooses to use margin to determine the position
<!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 method
Let the left and right parts float, and use margin to adapt to the middle part after breaking away from the document flow
<!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>
Flexible box layout
Use a container to wrap the three columns, and The display of the container is set to flex, the width of the left and right parts is set to fixed, the middle flex is set to 1, and the values of the left and right sides are fixed, so the middle adaptive
<!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>The above is the detailed content of How to implement three-column layout with CSS? 3 ways to implement a three-column layout (code example). For more information, please follow other related articles on the PHP Chinese website!