三栏布局的五种方式&圣杯布局和双飞燕布局
Posted 江州益彤
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三栏布局的五种方式&圣杯布局和双飞燕布局相关的知识，希望对你有一定的参考价值。
float
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<style type="text/css">
.outer{
min-width:600px;
}
.side{
width: 300px;
height:300px;
background-color:#bfa;
}
.left{
float:left;
}
.right{
float:right;
}
.mid{
float:left;
width: calc(100% - 600px);
height:300px;
background-color:#55ffff;
}
</style>
</head>
<body >
<div class="outer">
<div class="side left"></div>
<div class="side right"></div>
<div class="mid"></div>
</div>
</body>
</html>
position
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<style type="text/css">
.outer {
position: relative;
}
.inner {
position: absolute;
top: 0;
height: 300px;
background-color: #bfa;
}
.left {
left: 0;
width: 300px;
}
.right {
right: 0;
width: 300px;
}
.mid {
left: 300px;
right: 300px;
background-color: #55ffff;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner left"></div>
<div class="inner mid"></div>
<div class="inner right"></div>
</div>
</body>
</html>
flex
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<style type="text/css">
.outer {
display: flex;
}
.inner {
width: 300px;
height: 300px;
background-color: orange;
}
.mid {
flex: 1;
background-color: #55ffff;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner left"></div>
<div class="inner mid"></div>
<div class="inner right"></div>
</div>
</body>
</html>
table
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<style type="text/css">
.outer {
display: table;/*会自动缩放宽高*/
}
.inner {
width: 300px;
height: 300px;
background-color: orange;
}
.mid {
display: table-cell;
width:100%;/*继承父级软板，会自动计算剩余宽度*/
background-color: #55ffff;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner left"></div>
<div class="inner mid"></div>
<div class="inner right"></div>
</div>
</body>
</html>
grid
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<style type="text/css">
.outer {
display: grid;
width:100%;
grid-template-rows: 300px 300px 300px;
grid-template-columns: 300px auto 300px;
}
.inner {
background-color: orange;
}
.mid {
background-color: #55ffff;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner left"></div>
<div class="inner mid"></div>
<div class="inner right"></div>
</div>
</body>
</html>
圣杯布局&双飞燕布局
圣杯布局
双飞燕布局
概括为=>左右固定，中间自适应
1、圣杯布局
使用浮动+margin布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style type="text/css">
html,
body {
height: 100%;
overflow: hidden;
/*一个屏幕视口*/
}
.container {
height: 100%;
/*给左右区域留有位置*/
padding: 0 200px;
}
.left,
.right {
width: 200px;
min-height: 200px;
/*演示需要，实际开发时删除*/
background: lightblue;
}
.center {
width: 100%;
min-height: 400px;
background: lightsalmon;
}
.left,
.center,
.right {
float: left;
}
.left {
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
margin-right: -200px;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="center">中间内容</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
</html>
使用flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style type="text/css">
html,
body {
/*一个屏幕视口*/
overflow: hidden;
}
.container {
display: flex;
justify-content: space-between;
height: 100%;
}
.left,
.right {
flex: 0 0 200px;
height: 200px;
background: lightblue;
}
.center {
flex: 1;/*抢占所有剩余空间*/
min-height: 400px;
background-color: lightsalmon;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左边</div>
<div class="center">中间内容</div>
<div class="right">右边</div>
</div>
</body>
</html>
使用position定位布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style type="text/css">
html,
body {
/*一个屏幕视口*/
overflow: hidden;
}
.container {
position:relative;
height: 100%;
}
.left,
.right {
position:absolute;
top:0;
width: 200px;
min-height: 200px;
background: lightblue;
}
.left{
left: 0;
}
.right{
right: 0;
}
.center {
margin:0 200px;
min-height: 400px;
background-color: lightsalmon;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左边</div>
<div class="center">中间内容</div>
<div class="right">右边</div>
</div>
</body>
</html>
2、双飞燕布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双飞燕布局</title>
<style type="text/css">
html,
body {
height: 100%;
overflow: hidden;
/*一个屏幕视口*/
}
.container,
.left,
.right {
float: left;
}
.container {
width: 100%;
}
.container .center {
margin:0 200px;
min-height: 400px;
background: lightsalmon;
}
.left,
.right {
width:200px;
min-height: 200px;
background: lightblue;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
</style>
</head>
<body class="clearfix">
<div class="container">
<div class="center">中间内容</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</body>
</html>
以上是关于三栏布局的五种方式&圣杯布局和双飞燕布局的主要内容，如果未能解决你的问题，请参考以下文章