两边宽度已知，如何让中间自适应
共有五种布局方式：
1.浮动布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>页面布局/两边宽度已知，如何让中间自适应</title> <style type="text/css"> html * { padding: 0; margin: 0; } .layout { margin-top: 20px; } .layout div { min-height: 100px; } .layout .left, .layout .right { width: 300px; } .layout .left { background: pink; } .layout .right { background: orange; } .layout .center { background: #3FE5F0; } </style> </head> <body> <!-- 浮动布局 --> <section class="layout float"> <style type="text/css" media="screen"> .layout.float .left { float: left; } .layout.float .right { float: right; } </style> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>浮动解决方案</h1> 1.这是一个三栏浮动布局的中间部分 2.这是一个三栏浮动布局的中间部分 3.这是一个三栏浮动布局的中间部分 </div> </article> </section> </body> </html>
缺点：float，是脱离文档流的，如果处理不好，会遇到很多问题。
优点：兼容性比较好。
2.绝对定位布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>页面布局/两边宽度已知，如何让中间自适应</title> <style type="text/css"> html * { padding: 0; margin: 0; } .layout { margin-top: 20px; } .layout div { min-height: 100px; } .layout .left, .layout .right { width: 300px; } .layout .left { background: pink; } .layout .right { background: orange; } .layout .center { background: #3FE5F0; } </style> </head> <body> <!-- 绝对定位解决方案 --> <section class="layout absolute"> <style type="text/css" media="screen"> .layout.absolute .left-center-right>div { position: absolute; } .layout.absolute .left { left: 0; } .layout.absolute .right { right: 0; } .layout.absolute .center { left: 300px; right: 300px; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>绝对定位解决方案</h1> 1.这是一个三栏绝对定位布局中间部分 2.这是一个三栏绝对定位布局中间部分 3.这是一个三栏绝对定位布局中间部分 </div> <div class="right"></div> </article> </section> </body> </html>
缺点：脱离文档流，下面所有的子元素也必须脱离文档流，所以可使用性比较差。
优点：快捷，如果配合js使用，非常快，也不容易出问题。
3.flexbox布局
flexbox布局教程：Flex 布局教程：语法篇 、Flex 布局教程：实例篇。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>页面布局/两边宽度已知，如何让中间自适应</title> <style type="text/css"> html * { padding: 0; margin: 0; } .layout { margin-top: 20px; } .layout div { min-height: 100px; } .layout .left, .layout .right { width: 300px; } .layout .left { background: pink; } .layout .right { background: orange; } .layout .center { background: #3FE5F0; } </style> </head> <body> <!-- flexbox 解决方案 --> <section class="layout flexbox"> <style type="text/css" media="screen"> .layout.flexbox { margin-top: 20px; } .layout.flexbox .left-center-right { display: flex; } .layout.flexbox .left-center-right .center { flex: 1; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>flexbox解决方案</h1> 1.这是一个三栏flexbox布局中间部分 2.这是一个三栏flexbox布局中间部分 3.这是一个三栏flexbox布局中间部分 </div> <div class="right"></div> </article> </section> </body> </html>
注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
缺点：有的浏览器版本不兼容。比如ie8.
优点：弥补了float和position: absolute的不足。
4.表格（table）布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>页面布局/两边宽度已知，如何让中间自适应</title> <style type="text/css"> html * { padding: 0; margin: 0; } .layout { margin-top: 20px; } .layout div { min-height: 100px; } .layout .left, .layout .right { width: 300px; } .layout .left { background: pink; } .layout .right { background: orange; } .layout .center { background: #3FE5F0; } </style> </head> <body> <!-- 表格解决方案 --> <section class="layout table"> <style type="text/css" media="screen"> .layout.table .left-center-right { width: 100%; display: table; height: 100px; } .layout.table .left-center-right>div { display: table-cell; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>表格解决方案</h1> 1.这是一个三栏表格布局中间部分 2.这是一个三栏表格布局中间部分 3.这是一个三栏表格布局中间部分 </div> <div class="right"></div> </article> </section> </body> </html>
缺点：三个部分，当其中一个单元格的高度超出时，俩测的单元格高度也要跟着调整高度。有时我们不需要同时增高的。
优点：兼容性比较好，可以兼容ie8。
5.网格 （grid）布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>页面布局/两边宽度已知，如何让中间自适应</title> <style type="text/css"> html * { padding: 0; margin: 0; } .layout { margin-top: 20px; } .layout div { min-height: 100px; } .layout .left, .layout .right { width: 300px; } .layout .left { background: pink; } .layout .right { background: orange; } .layout .center { background: #3FE5F0; } </style> </head> <body> <!-- 网格布局 --> <section class="layout grid"> <style type="text/css" media="screen"> .layout.grid .left-center-right { display: grid; width: 100%; grid-template-rows: 100px; /* 行高 */ grid-template-columns: 300px auto 300px; /* 我们需要三列，左右两列各300px，中间自适应 */ } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>网格布局解决方案</h1> 1.这是一个三栏网格布局中间部分 2.这是一个三栏网格布局中间部分 3.这是一个三栏网格布局中间部分 </div> <div class="right"></div> </article> </section> </body> </html>
缺点：支持Grid Layout布局模块的浏览器少得可怜。仅有IE10+支持，这回出乎您的意外了吧，没想到IE在这个领域先行了。不过就算是IE10+支持，也仅仅是支持部CSS3 Grid Layout模块中的部分属性值。
优点：代码量简化。
