一個(gè)常用的布局問題就是左右兩欄固定寬度，中間內(nèi)容自適應(yīng)，接下來介紹5種常用的解決方案。
1、float浮動(dòng)
通過float，讓左右2欄浮動(dòng)到左邊和右邊，然后中間div需要放在左右兩個(gè)div之后。
- 優(yōu)點(diǎn)：瀏覽器的兼容性比較好
- 缺點(diǎn)：浮動(dòng)會(huì)造成相關(guān)元素脫離文檔流，需要做一些清除浮動(dòng)的處理。另外當(dāng)中間區(qū)域內(nèi)容高度超出設(shè)定高度時(shí)候，會(huì)破壞三欄布局。
<!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>float</title>
<style media="screen">
article div{
height: 200px;
}
.left{
float:left;
width:200px;
background: red;
}
.center{
background: yellow;
}
.right{
float:right;
width:200px;
background: blue;
}
</style>
</head>
<body>
<article>
<div class="left">左</div>
<div class="right">右</div>
<div class="center">中</div>
</article>
</body>
</html>
2、絕對(duì)定位
左中右三個(gè)div都需要設(shè)置絕對(duì)定位：position: absolute，左側(cè)div設(shè)置left: 0靠左，右側(cè)div同理設(shè)置right: 0靠右，中間div設(shè)置left和right值為左側(cè)和右側(cè)div的寬度。
- 優(yōu)點(diǎn)：方便快捷
- 缺點(diǎn)：會(huì)造成子元素也一起脫離文檔流，可使用性比較差。另外當(dāng)中間區(qū)域內(nèi)容高度超出設(shè)定高度時(shí)候，會(huì)破壞三欄布局。
<!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> absolute </title>
<style media="screen">
article div{
height: 200px;
position: absolute;
}
.left{
left:0;
width: 200px;
background: red;
}
.center{
left: 200px;
right: 200px;
background: yellow;
}
.right{
right:0;
width: 200px;
background: blue;
}
</style>
</head>
<body>
<article>
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</article>
</body>
</html>
3、flex布局
首先設(shè)置包裹左中右三個(gè)div的父容器節(jié)點(diǎn)的布局為flex布局即display: flex，
左右div設(shè)置固定寬度，中間div設(shè)置flex: 1占滿剩余的空間。
- 優(yōu)點(diǎn)：比較完美的做法，移動(dòng)端比較常見。當(dāng)不給定三欄高度時(shí)，可以隨區(qū)域內(nèi)容高度的改變而改變。
- 缺點(diǎn)：兼容性不太好，IE11以下都不支持。且設(shè)為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。
<!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>flex</title>
<style media="screen">
article {
display: -webkit-flex; /* Safari */
display: flex;
}
article div{
height: 200px;
}
.left{
width: 200px;
background: red;
}
.center{
flex: 1;
background: yellow;
}
.right{
width: 200px;
background: blue;
}
</style>
</head>
<body>
<article>
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</article>
</body>
</html>
4、表格布局table
首先設(shè)置包裹左中右三個(gè)div的父容器節(jié)點(diǎn)的布局為table布局即display: table，且設(shè)置總的寬度為100%，左中右都設(shè)為table-cell，左右div設(shè)置固定寬度，中間div不設(shè)置寬度。
- 優(yōu)點(diǎn)：比較完美的做法。當(dāng)不給定三欄高度時(shí)，可以隨區(qū)域內(nèi)容高度的改變而改變。
- 缺點(diǎn)：兼容性不太好，IE11以下不支持，三欄高度會(huì)始終一致，如果只想對(duì)某一欄高度增加或減少是不行的
<!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>table</title>
<style media="screen">
article {
display: table;
width: 100%;
}
article div{
height: 200px;
display: table-cell;
}
.left{
width: 200px;
background: red;
}
.center{
background: yellow;
}
.right{
width: 200px;
background: blue;
}
</style>
</head>
<body>
<article>
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</article>
</body>
</html>
5、網(wǎng)格grid布局
首先設(shè)置包裹左中右三個(gè)div的父容器節(jié)點(diǎn)的布局為grid布局即display: grid，且設(shè)置總的寬度為100%，網(wǎng)格需要設(shè)置行和列，行高設(shè)置200px，即grid-template-rows: 200px;，同時(shí)有3列，左右各200px寬度，中間自適應(yīng)，即grid-template-columns: 200px auto 200px;。
- 優(yōu)點(diǎn)：比較新穎的做法
- 缺點(diǎn)：兼容性不太好，IE11以下不支持。另外當(dāng)中間區(qū)域內(nèi)容高度超出設(shè)定高度時(shí)候，會(huì)破壞三欄布局。
<!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>grid</title>
<style media="screen">
article {
width:100%;
display: grid;
grid-template-rows: 200px;
grid-template-columns: 200px auto 200px;
}
.left{
background: red;
}
.center{
background: yellow;
}
.right{
background: blue;
}
</style>
</head>
<body>
<article>
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</article>
</body>
</html>
