1.通过浮动实现三栏布局。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
.left{
background:red;
float:left;
width:300px;
height:100px;
}
.right{
background:yellow;
float:right;
width:300px;
height:100px;
}
.center{
background: blue;
margin-left:300px;
margin-right:300px;
height:100px;
}
</style></head>
<body>
<!--浮动实现三栏布局-->
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>
2.通过绝对定位实现三栏布局
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
.container{
position:relative;
}
.left{
background:red;
position:absolute;
left:0;
top:0;
width:300px;
height:100px;
}
.right{
background:yellow;
position:absolute;
right:0;
top:0;
width:300px;
height:100px;
}
.center{
background: blue;
height:100px;
margin-left:300px;
margin-right:300px;
}
</style></head>
<body>
<!--绝对定位实现三栏布局-->
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>
3.通过display：table实现三栏布局
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
.container{
display:table;
width:100%;
}
.left{
background:red;
display:table-cell;
width:300px;
height:100px;
}
.right{
background:yellow;
display:table-cell;
width:300px;
height:100px;
}
.center{
display:table-cell;
background: blue;
height:100px;
}
</style></head>
<body>
<!--table实现三栏布局-->
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div></body>
</html>
4通过flex实现三栏布局
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
.container{
display:flex;
}
.left{
background:red;
width:300px;
height:100px;
}
.right{
background:yellow;
width:300px;
height:100px;
}
.center{
flex:1;
background: blue;
height:100px;
}
</style></head>
<body>
<!--flex实现三栏布局-->
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div></body>
</html>
5通过网格实现三栏布局
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
.container{
display:grid;
grid-template-rows:100px;
grid-template-columns:300px auto 300px;
}
.left{
background:red;
}
.right{
background:yellow;
}
.center{
background: blue;
}
</style></head>
<body>
<!--网格实现三栏布局-->
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div></body>
</html>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
