一個常用的布局問題就是左右兩欄固定寬度，中間內(nèi)容自適應(yīng)吱韭，接下來介紹5種常用的解決方案吆豹。
1、float浮動
通過float理盆，讓左右2欄浮動到左邊和右邊痘煤，然后中間div需要放在左右兩個div之后。
- 優(yōu)點(diǎn)：瀏覽器的兼容性比較好
- 缺點(diǎn)：浮動會造成相關(guān)元素脫離文檔流猿规，需要做一些清除浮動的處理衷快。另外當(dāng)中間區(qū)域內(nèi)容高度超出設(shè)定高度時候，會破壞三欄布局姨俩。
<!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蘸拔、絕對定位
左中右三個div都需要設(shè)置絕對定位：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)：會造成子元素也一起脫離文檔流张遭，可使用性比較差陨晶。另外當(dāng)中間區(qū)域內(nèi)容高度超出設(shè)定高度時候，會破壞三欄布局帝璧。
<!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è)置包裹左中右三個div的父容器節(jié)點(diǎn)的布局為flex布局即display: flex，
左右div設(shè)置固定寬度的烁，中間div設(shè)置flex: 1占滿剩余的空間褐耳。
- 優(yōu)點(diǎn)：比較完美的做法，移動端比較常見渴庆。當(dāng)不給定三欄高度時铃芦，可以隨區(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è)置包裹左中右三個div的父容器節(jié)點(diǎn)的布局為table布局即display: table，且設(shè)置總的寬度為100%扔字，左中右都設(shè)為table-cell，左右div設(shè)置固定寬度吠式，中間div不設(shè)置寬度茁彭。
- 優(yōu)點(diǎn)：比較完美的做法总寒。當(dāng)不給定三欄高度時，可以隨區(qū)域內(nèi)容高度的改變而改變理肺。
- 缺點(diǎn)：兼容性不太好摄闸，IE11以下不支持，三欄高度會始終一致妹萨，如果只想對某一欄高度增加或減少是不行的
<!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è)置包裹左中右三個div的父容器節(jié)點(diǎn)的布局為grid布局即display: grid，且設(shè)置總的寬度為100%眠副，網(wǎng)格需要設(shè)置行和列画切，行高設(shè)置200px，即grid-template-rows: 200px;囱怕，同時有3列霍弹，左右各200px寬度，中間自適應(yīng)娃弓，即grid-template-columns: 200px auto 200px;典格。
- 優(yōu)點(diǎn)：比較新穎的做法
- 缺點(diǎn)：兼容性不太好，IE11以下不支持台丛。另外當(dāng)中間區(qū)域內(nèi)容高度超出設(shè)定高度時候耍缴，會破壞三欄布局。
<!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>
