本文主要讲述几种常用的前端三列布局的方式。
1.两侧浮动+中间自动铺开
主要是左右盒子两边分别float:left,float:right,中间通过margin值自动撑开。代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> float+margin实现三列布局 </title>
<style>
.left{
width:200px;
background-color: red;
float:left;
}
.right{
width:300px;
background-color: yellow;
float:right;
}
.main{
margin-left:200px;
margin-right:300px;
background-color: blue;
}
.left,.right,.main{
height:300px;
}
</style>
</head>
<body>
<div class="left">左盒子</div>
<div class="right">右盒子</div>
<div class="main">中间盒子</div>
</body>
</html>
实现结果如下:
2.绝对定位
给每个盒子设置绝对定位,用left,right值实现。代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绝对定位实现三列布局</title>
<style>
.left,.main,.right{
height:300px;
}
.left{
position: absolute;
left:0;
background-color :red;
width:200px;
}
.main{
position: absolute;
left:200px;
right:300px;
background-color: yellow;
}
.right{
position: absolute;
right:0;
width:300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左盒子</div>
<div class="main">中间盒子</div>
<div class="right">右盒子</div>
</div>
</body>
</html>
结果如下:
3.BFC实现三列布局
利用BFC清除浮动的特性来实现(overflow:hidden等),代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>BFC实现三列布局</title>
<style>
.left{
width:200px;
background-color: red;
float:left;
margin-right: 10px;
}
.right{
width:300px;
background-color: yellow;
float:right;
margin-left: 10px;
}
.main{
background-color: blue;
overflow: hidden;
}
.left,.right,.main{
height:300px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左盒子</div>
<div class="right">右盒子</div>
<div class="main">中间盒子</div>
</div>
</body>
</html>
结果如下:
4.双飞翼布局
利用margin负值移动元素位置
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
.center{
width:100%;
float: left;
}
.main{
margin-left:210px;
height:200px;
margin-right: 310px;
background-color: yellow;
}
.left{
float:left;
width:200px;
height: 200px;
margin-left: -100%;
background-color: red;
}
.right{
float:left;
width:300px;
background-color: blue;
height: 200px;
margin-left:-300px;
}
</style>
</head>
<body>
<div class="center">
<div class="main">中间的盒子</div>
</div>
<div class="left">左边的盒子</div>
<div class="right">右边的盒子</div>
</body>
</html>
结果如下:
5.圣杯布局。
与双飞翼布局类似 不同的是圣杯布局的中间盒子是被另一个父元素包裹这的,而圣杯布局不需要被包裹。而是使用padding值来确定盒子内部的内容位置。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style type="text/css">
.container {
padding: 0 300px 0 200px;
}
.left, .main, .right {
position: relative;
min-height: 130px;
float: left;
}
.left {
left: -200px;
margin-left: -100%;
background: green;
width: 200px;
}
.right {
right: -300px;
margin-left: -300px;
background-color: red;
width: 300px;
}
.main {
background-color: blue;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
结果如下:
6.flex实现三列布局
利用flex的属性实现三列布局,对flex属性不熟悉的同学可以先看阮一峰大神的关于flex的讲解。非常简单,代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>flex实现三列布局</title>
<style>
.container{
display: flex;
height:200px;
}
.left,.right,.main{
height:100%
}
.left{
width:200px;
background-color: red;
}
.right{
width: 300px;
background-color: yellow;
}
.main{
flex: 1;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="left">我是左边的盒子</div>
<div class="main">我是中间的盒子</div>
<div class="right">我是右边的盒子</div>
</div>
</body>
</html>
结果如下:
7.table实现三栏布局
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>table实现三列布局</title>
<style>
.container{
display: table;
height:300px;
width:100%;
}
.left,.main,.right{
height:100%;
display: table-cell;
}
.left{
width:200px;
background-color: red;
}
.main{
background-color: yellow;
}
.right{
width:300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="left">我是左边的盒子</div>
<div class="main">我是中间的盒子</div>
<div class="right">我是右边的盒子</div>
</div>
</body>
</html>
结果如下:
8.grid实现三栏布局
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>grid实现三列布局</title>
<style>
.container{
display: grid;
grid-template-rows: 300px;
grid-template-columns: 200px auto 300px;
}
.left{
background-color: red;
}
.main{
background-color: yellow;
}
.right{
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="left">我是左边的盒子</div>
<div class="main">我是中间的盒子</div>
<div class="right">我是右边的盒子</div>
</div>
</body>
</html>
结果如下: