題目： 假設(shè)高度已知，請寫出三欄布局，其中左欄右欄高度各為300px,中間自適應
能寫出有幾種方案？
- 方法一：float 浮動
- 方法二：absoulte 絕對定位
- 方法三：table 表格布局
- 方法四：flex
- 方法五：grid網(wǎng)格布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>頁面布局</title>
</head>
<style>
html * {
margin: 0;
padding: 0;
}
</style>
<body>
<p>假設(shè)高度已知，請寫出三欄布局，其中左欄右欄高度各為300px,中間自適應</p>
<div class="section">
<style>
.layout.float div {
height: 100px;
}
.float .side {
width: 300px;
}
.float .left {
float: left;
background: #0f0;
}
.float .right {
float: right;
background: #00f;
}
.float .center {
background: #f00;
}
</style>
<h1>方法一：浮動</h1>
<div class="layout float">
<div class="left side"></div>
<div class="right side"></div>
<div class="center"></div>
</div>
</div>
<div class="section">
<style>
.layout.absolute div {
height: 100px;
}
.absolute .side {
width: 300px;
position: absolute;
}
.absolute .left {
left: 0;
background: #0f0;
}
.absolute .right {
right: 0;
background: #00f;
}
.absolute .center {
background: #f00;
}
</style>
<h1>方法二：絕對定位</h1>
<div class="layout absolute">
<div class="left side"></div>
<div class="right side"></div>
<div class="center"></div>
</div>
</div>
<div class="section">
<style>
.flex {
display: flex;
}
.layout.flex div {
height: 100px;
}
.flex .side {
width: 300px;
}
.flex .left {
background: #0f0;
}
.flex .right {
background: #00f;
}
.flex .center {
flex: 1;
background: #f00;
}
</style>
<h1>方法三：flex 彈性布局</h1>
<div class="layout flex">
<div class="left side"></div>
<div class="center"></div>
<div class="right side"></div>
</div>
</div>
<div class="section">
<style>
.layout.table {
width: 100%;
display: table;
height: 100px;
}
.table > div {
display: table-cell;
}
.table .side {
width: 300px;
}
.table .left {
background: #0f0;
}
.table .right {
background: #00f;
}
.table .center {
background: #f00;
}
</style>
<h1>方法四：table 表格布局</h1>
<div class="layout table">
<div class="left side"></div>
<div class="center"></div>
<div class="right side"></div>
</div>
</div>
<div class="section">
<style>
.grid {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.grid .side {
width: 300px;
}
.grid .left {
background: #0f0;
}
.grid .right {
background: #00f;
}
.grid .center {
background: #f00;
}
</style>
<h1>方法五：grid 網(wǎng)格布局</h1>
<div class="layout grid">
<div class="left side"></div>
<div class="center"></div>
<div class="right side"></div>
</div>
</div>
</body>
</html>
截圖
延伸
每個方案各自的優(yōu)缺點
- 浮動：
缺點：脫離文檔流 要清除浮動
優(yōu)點：兼容性好 - 絕對定位
缺點：脫離文檔流，子元素也脫離
優(yōu)點：快捷，不易出錯 - flex
缺點：IE兼容性不好 不能兼容IE8及以下瀏覽器。
優(yōu)點：比較完美 特別是移動端 - table 布局
缺點：當其中一個單元格高度超出的時候，兩側(cè)的單元格也是會跟著一起變高的，而有時候這種效果不是我們想要的。
優(yōu)點：兼容性好 - 網(wǎng)格布局
網(wǎng)格布局也是新出的一種布局方式
把高度已知去掉 哪些適用，哪些不適用
- flex和table布局可以用，其他三種不行
