两栏布局（左列定宽, 右列自适应）
DOM结构
<div class="box"><div class="box-left"></div><div class="box-right"></div>
</div>
float + margin
.box {height: 200px;
}.box > div {height: 100%;
}.box-left {width: 200px;background-color: antiquewhite;float: left;
}.box-right {margin-left: 200px;background-color: aquamarine;
}
利用 calc 计算宽度
.box {height: 200px;
}.box > div {height: 100%;
}.box-left {width: 200px;background-color: antiquewhite;float: left;
}.box-right {background-color: aquamarine;width: calc(100% - 200px);float: right;
}
float + overflow
.box {height: 200px;
}.box > div {height: 100%;
}.box-left {width: 200px;float: left;background-color: blue;
}.box-right {overflow: hidden;background-color: red;
}
flex
.box {height: 200px;display: flex;
}.box > div {height: 100%;
}.box-left {width: 200px;background-color: blue;
}.box-right {flex-grow: 1;overflow: hidden;background-color: red;
}
三栏布局
左右加浮动，中间不动
<style>.layout.float .left {float: left;width: 300px;background: red;}.layout.float .right {float: right;width: 300px;background: blue;}.layout.float .center {background: yellow;}
</style>
<section class="layout float"><article class="left-center-right"><div class="left"></div><div class="right"></div><div class="center"><h1>浮动解决方案</h1><p>1.这是布局的中间部分</p><p>2.这是布局的中间部分</p></div></article>
</section>
绝对定位，div 全部浮动，左边距离设为0，中间设 300，最右边那个右边设0
<style>.layout.absolute .left-center-right>div {position: absolute;}.layout.absolute .left {left: 0;width: 300px;background: red;}.layout.absolute .center {left: 300px;right: 300px;background: yellow;}.layout.absolute .right {right: 0;width: 300px;background: blue;}
</style>
<section class="layout absolute"><article class="left-center-right"><div class="left"></div><div class="center"><h1>绝对定位的解决方案</h1><p>1.这是布局的中间部分</p><p>2.这是布局的中间部分</p></div><div class="right"></div></article>
</section>
flexbox布局 父元素设置 flex，左右元素设置宽高，中间设置 flex: 1
<style>.layout.flexbox .left-center-right {display: flex;}.layout.flexbox .left {width: 300px;background: red;}.layout.flexbox .center {flex: 1;background: yellow;}.layout.flexbox .right {width: 300px;background: blue;}
</style>
<section class="layout flexbox"><article class="left-center-right"><div class="left"></div><div class="center"><h1>flexbox的解决方案</h1><p>1.这是布局的中间部分</p><p>2.这是布局的中间部分</p></div><div class="right"></div></article>
</section>
父元素设置表格属性，div 设置 table-cell，子元素左右设置宽高即可
<style>.layout.table .left-center-right {width: 100%;display: table;height: 100px;}.layout.table .left-center-right>div {display: table-cell;}.layout.table .left {width: 300px;background: red;}.layout.table .center {background: yellow;}.layout.table .right {width: 300px;background: blue;}
</style>
<section class="layout table"><article class="left-center-right"><div class="left"></div><div class="center"><h1>表格布局的解决方案</h1><p>1.这是布局的中间部分</p><p>2.这是布局的中间部分</p></div><div class="right"></div></article>
</section>
网格布局，父元素设置 grid
<style>.layout.grid .left-center-right {display: grid;width: 100%;grid-template-rows: 100px;grid-template-columns: 300px auto 300px;}.layout.grid .left {background: red;}.layout.grid .center {background: yellow;}.layout.grid .right {background: blue;}
</style>
<section class="layout grid"><article class="left-center-right"><div class="left"></div><div class="center"><h1>网格布局的解决方案</h1><p>1.这是布局的中间部分</p><p>2.这是布局的中间部分</p></div><div class="right"></div></article>
</section>
26. 圣杯布局和双飞翼布局
通俗的来说就是左右两栏固定宽度，中间部分自适应的三栏布局。
26.1 圣杯布局
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;right: 0;}.header,.footer {height: 100px;background-color: aquamarine;}.container {/* 7. container设置padding: 0, rightWidth, 0, leftWidth*/padding: 0 220px 0 200px;/* 2. 给container设置上overflow: hidden，可以形成BFC撑开文档*/overflow: hidden;}.left,.middle,.right {/* 5. 给left、middle、right设置position: relative，不会遮挡middle的内容*/position: relative;/* 1. 首先把left、middle、right都放出来，给它们三个设置上float: left, 脱离文档流*/float: left;min-height: 130px;word-break: break-all;/* 8. 解决单独部分内容扩充的时候，底部会参差不齐。*/padding-bottom: 9999px;margin-bottom: -9999px;}.left {margin-left: -100%;/* 6. left设置 left: -leftWidth*/left: -200px;/* 3. left、right设置上各自的宽度*/width: 200px;}.right {margin-left: -220px;/* 6. right设置 right: -rightWidth*/right: -220px;/* 3. left、right设置上各自的宽度*/width: 220px;}.middle {/* 4. middle设置width: 100%*/width: 100%;}</style>
</head><body><div class="header">header</div><div class="container"><div class="middle"><h4>middle</h4><p>middlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddle</p></div><div class="left"><h4>left</h4><p>leftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleft</p></div><div class="right"><h4>right</h4><p>rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright</p></div></div><div class="footer">footer</div>
</body></html>
双飞翼布局
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.header,.footer {height: 100px;background-color: aquamarine;}.container {/* 2. 给container设置上overflow: hidden; 可以形成BFC撑开文档*/overflow: hidden;}.left,.middle,.right {/* 1. 首先把left、middle、right都放出来, middle中增加inner，给它们三个设置上float: left, 脱离文档流*/float: left;min-height: 130px;word-break: break-all;/* 7. 解决单独部分内容扩充的时候，底部会参差不齐。*/padding-bottom: 9999px;margin-bottom: -9999px;}.left {/* 5. left设置 margin-left: -100%*/margin-left: -100%;/* 3. left、right设置上各自的宽度*/width: 200px;}.right {/* 6. right设置 right: -rightWidth*/margin-left: -220px;/* 3. left、right设置上各自的宽度*/width: 220px;}.middle {/* 4. middle设置width: 100%*/width: 100%;height: 100%;}.inner {margin: 0 220px 0 200px;min-height: 130px;word-break: break-all;}</style>
</head><body><div class="header">header</div><div class="container"><div class="middle"><div class="inner"><h4>middle</h4><p>middlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddle</p></div></div><div class="left"><h4>left</h4><p>leftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleft</p></div><div class="right"><h4>right</h4><p>rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright</p></div></div><div class="footer">footer</div>
</body></html>