實(shí)現(xiàn)三欄布局：高度固定，中間自適應(yīng)，左右寬度是 300px。（div 標(biāo)簽的位置）
布局一：圣杯布局
圣杯布局和雙飛翼布局解決的問(wèn)題是一樣的渴杆，就是兩邊頂寬射窒，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染将塑。
圣杯布局和雙飛翼布局解決問(wèn)題的方案在前一半是相同的脉顿，也就是三欄全部float浮動(dòng)，但左右兩欄加上負(fù)margin讓其跟中間欄div并排点寥，以形成三欄布局艾疟。
不同在于解決“中間欄div內(nèi)容不被遮擋”問(wèn)題的思路不一樣：圣杯布局，為了中間div內(nèi)容不被遮擋敢辩，將中間div設(shè)置了左右padding-left和padding-right后蔽莱，將左右兩個(gè)div用相對(duì)布局position: relative并分別配合right和left屬性，以便左右兩欄div移動(dòng)后不遮擋中間div戚长。
<style>
* {
margin: 0;
padding: 0;
}
.left,
.center,
.right {
position: relative;
float: left;
height: 300px;
}
.wrapper{
padding: 0 300px;
overflow: hidden;
}
.left {
margin-left: -100%;
left: -300px;
width: 300px;
background: red;
}
.right {
margin-left: -300px;
right: -300px;
width: 300px;
background: green;
}
.center {
width: 100%;
background: blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
布局二：雙飛翼布局
雙飛翼布局盗冷，為了中間div內(nèi)容不被遮擋，直接在中間div內(nèi)部創(chuàng)建子div用于放置內(nèi)容同廉，在該子div里用margin-left和margin-right為左右兩欄div留出位置仪糖。
<style>
* {
margin: 0;
padding: 0;
}
.center {
float: left;
width: 100%;
height: 300px;
overflow: hidden;
background-color: springgreen;
}
.content {
margin: 0 300px;
height: 100%;
background-color: purple;
}
.left {
float: left;
width: 300px;
height: 300px;
background-color: pink;
margin-left: -100%;
}
.right {
float: left;
width: 300px;
height: 300px;
background-color: pink;
margin-left: -300px;
}
</style>
<body>
<div class="wrapper">
<div class="center">
<div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
布局三：flex 布局
<style>
.wrapper {
display: flex;
}
.left {
width: 300px;
height: 300px;
background-color: pink;
}
.main {
flex: 1;
height: 300px;
background-color: springgreen;
}
.right {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
<div class="wrapper">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
布局四：絕對(duì)定位布局
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
}
.left {
position: absolute;
left: 0;
width: 300px;
height: 300px;
background-color: pink;
}
.right {
position: absolute;
right: 0;
width: 300px;
height: 300px;
background-color: springgreen;
}
.center {
position: absolute;
left: 300px;
right: 300px;
height: 300px;
background-color: yellowgreen;
}
</style>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
網(wǎng)格布局
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
display: grid;
grid-template-columns: 300px auto 300px;
grid-template-rows: 300px;
}
.left {
background-color: purple;
}
.center {
background-color: dodgerblue;
}
.right {
background-color: springgreen;
}
</style>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
圣杯布局和雙飛翼布局的作用和區(qū)別
六種CSS經(jīng)典三欄布局方案
擴(kuò)展一：上下固定，中間自適應(yīng)
布局一：絕對(duì)定位布局
<style>
* {
padding: 0;
margin: 0;
}
.top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: pink;
}
.center {
position: absolute;
top: 100px;
bottom: 100px;
width: 100%;
overflow: auto;
background-color: yellowgreen;
color: #fff;
text-align: center;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-color: purple;
}
</style>
<body>
<div class="wrapper">
<div class="top"></div>
<div class="center">
</div>
<div class="bottom"></div>
</div>
</body>
布局二：flex 布局
<style>
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.top {
width: 100%;
height: 100px;
background-color: yellow;
}
.center {
flex: 1;
overflow: auto;
background-color: pink;
color: #fff;
}
.bottom {
width: 100%;
height: 100px;
background-color: rosybrown;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="top"></div>
<div class="center">
</div>
<div class="bottom"></div>
</div>
</body>
布局三：網(wǎng)格布局
超級(jí)nice的教程 【圖片版】CSS網(wǎng)格布局（Grid）完全教程
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.wrapper {
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100px auto 100px;
}
.top {
background-color: springgreen;
}
.center {
background-color: rosybrown;
overflow: auto;
}
.bottom {
background-color: purple;
}
</style>
<body>
<div class="wrapper">
<div class="top"></div>
<div class="center">
</div>
<div class="bottom"></div>
</div>
</body>
擴(kuò)展二：左邊固定迫肖，右邊自適應(yīng)
七種實(shí)現(xiàn)左側(cè)固定锅劝，右側(cè)自適應(yīng)兩欄布局的方法
布局一：雙 float 布局
<style>
html, body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
}
.left {
float: left;
width: 100px;
height: 100%;
background-color: rosybrown;
}
.right {
float: left;
width: calc(100% - 100px);
height: 100%;
background-color: yellowgreen;
overflow: hidden;
}
.content {
overflow-y: scroll;
height: 100%;
}
</style>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="right">
<div class="content">
</div>
</div>
</div>
</body>
</html>
布局二：flex布局
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
}
.wrapper {
display: flex;
height: 100%;
}
.left {
width: 150px;
height: 100%;
background-color: yellowgreen;
}
.right {
flex: 1;
height: 100%;
background-color: pink;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="right">
<div class="content">
</div>
</div>
</div>
布局三：雙inline-block方案
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
font-size: 0;
-webkit-text-size-adjust: none; // 解決inline-block水平呈現(xiàn)的元素間，換行顯示或空格分隔的情況下會(huì)有間距的問(wèn)題
}
.left, .right {
height: 100%;
display: inline-block;
vertical-align: top;
}
.left {
width: 150px;
background-color: pink;
}
.right {
width: calc(100% - 160px);
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
布局四：grid布局
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 150px 1fr;
grid-template-rows: 1fr;
}
.left {
background-color: yellowgreen;
}
.right {
background-color: yellow;
}
</style>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
布局五：float+BFC
<style>
html, body {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
.left {
width: 150px;
height: 100%;
float: left;
background-color: yellow;
}
.right {
width: calc(100% - 150px);
height: 100%;
background-color: yellowgreen;
overflow: hidden;
}
</style>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
