今天总结一下圣杯布局的实现方式。这里列举了五种。除了第三种，其他都比较好理解，第三种建议margin和left自己一步一步添加样式，看看发生了什么。
圣杯布局
一、flex
<style>
.header,
.footer{
background: rgba(29,27,27,0.726);
height: 60px;
}
.container{
display: flex;
}
.left,
.right,
.middle{
height: 300px;
}
.left{
width: 200px;
background: rgba(95, 179, 235, 0.972);
}
.right{
width: 150px;
background: rgb(231, 105, 2);
}
.middle{
background: rgb(206, 201, 201);
flex: 1; // flex: 1 === flex: 1 1; flex: 1 !== flex: 1 1 auto;
}
</style>
<body>
<div>
<div class="header"></div>
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
</body>
二、grid
<style>
.box{
display: grid;
}
.header,
.footer{
height: 60px;
background: turquoise;
}
.left,
.right,
.middle{
height: 300px;
}
.header{
grid-row: 1;
grid-column: 1/6;
}
.footer{
grid-row: 3;
grid-column: 1/6;
}
.left{
grid-row: 2;
grid-column: 1/2;
background: pink;
}
.middle{
grid-row: 2;
grid-column: 2/5;
background: yellow;
}
.right{
grid-row: 2;
grid-column: 5/6;
background: red;
}
</style>
<body>
<div class="box">
<div class="header"></div>
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
<div class="footer"></div>
</div>
</body>
三、float(中间部分全部float:left)
<style>
.header,
.footer{
height: 60px;
background: #ccc;
}
.footer{
clear: both;
}
.container{
padding-left: 100px;
padding-right: 250px;
}
.column{
float: left;
position: relative;
font-size: 20px;
}
.middle{
width: 100%;
background: yellow;
}
.left{
width: 100px;
background: pink;
margin-left: -100%;
left: -100px;
}
.right{
width: 250px;
background: aqua;
margin-left: -250px;
left: 250px;
}
</style>
<div class="box">
<div class="header"></div>
<div class="container">
<div class="middle column">我是中间</div>
<div class="left column">我是左边</div>
<div class="right column">我是右边</div>
</div>
<div class="footer"></div>
</div>
四、float(中间部分的左边float:left;右边float: right)
<style>
.header,
.footer{
height: 60px;
background: #ccc;
}
.container{
overflow: hidden;
}
.middle{
background: yellow;
}
.left{
float: left;
width: 100px;
background: pink;
}
.right{
float: right;
width: 250px;
background: aqua;
}
</style>
<body>
<div class="box">
<div class="header"></div>
<div class="container">
<div class="left column">我是左边</div>
<div class="right column">我是右边</div>
<div class="middle column">我是中间</div>
</div>
<div class="footer"></div>
</div>
</body>
五、相对定位+绝对定位
.header,
.footer{
height: 60px;
background: #ccc;
}
.container{
min-height: 1.2em;
position: relative;
}
.container>div{
position: absolute;
}
.middle{
left: 100px;
right: 250px;
background: yellow;
}
.left{
left: 0;
top: 0;
width: 100px;
background: pink;
}
.right{
right: 0;
top: 0;
width: 250px;
background: aqua;
}
</style>
<body>
<div class="box">
<div class="header"></div>
<div class="container">
<div class="left column">我是左边</div>
<div class="middle column">我是中间</div>
<div class="right column">我是右边</div>
</div>
<div class="footer"></div>
</div>
</body>
双飞翼布局
<style>
*{
margin: 0;
padding: 0;
}
.middle {
background: yellow;
height: 500px;
}
.left {
float: left;
width: 200px;
height: 300px;
background: pink;
}
.right {
float: right;
width: 250px;
height: 300px;
background: aqua;
}
</style>
<body>
<div class="container">
<div class="left">左边</div>
<div class="right">右边</div>
<div class="middle">中间部分</div>
</div>
<body>
双飞翼布局可以由圣杯布局改造得来。
九宫格布局
flex布局
// 内部边框像素也为1px.
// 暂时只想到了用margin-left, margin-top来做。
<style>
.container{
width: 200px;
height: 200px;
}
.row {
display: flex;
}
.item {
border: solid black 1px;
flex-grow: 1;
margin-left: -1px;
margin-top: -1px;
}
</style>
<div class="container">
<div class='row'>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class='row'>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class='row'>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</div>
table布局
<style>
.container{
width: 200px;
display: table
}
.row{
display: table-row;
}
.item{
display: table-cell;
border: 1px solid black;
margin-left: -1px;
margin-top: -1px;
}
<div class="container">
<div class='row'>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class='row'>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class='row'>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</div>
grid布局
<style>
.container{
width: 200px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.item{
border: 1px solid black;
margin-left: -1px;
margin-top: -1px;
}
</style>
<div class="container">
<div class='row'>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class='row'>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class='row'>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</div>
