高度已知，三栏布局，左右个300px，中间自适应
方法一：
效果图1
效果图2
效果图3
<!DOCTYPE html><html><head> <title>浮动解决方案</title> <style> .layout article div { min-height: 100px; } .layout .left { float: left; width: 300px; background: red; } .layout .right { float: right; width: 300px; background: blue; } .layout .center { background: yellow; } </style></head><body> <section class="layout float"> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>浮动解决方案</h1> </div> </article> </section></body></html>浮动方法
缺点：清除浮动，脱离文档流，
优点：兼容性好
浮动的基本原理，遮挡，创建bfc
方法二：
效果图1
效果图2
效果图3
<!DOCTYPE html><html><head> <title>绝对定位解决方法</title> <style> .layout .left-right-center>div { min-height: 100px; position: absolute; } .layout .left { left: 0; width: 300px; background: red; } .layout .center { left: 300px; right: 300px; background: yellow; } .layout .right { right: 0; width: 300px; background: blue; } </style></head><body> <section class="layout absolute"> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>绝对定位解决方法</h1> </div> </article> </section></body></html>绝对定位
优点：快捷
缺点：子元素脱离文档流，可使用性差
方法三：
效果图1
效果图2
flexbox是让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容。
<!DOCTYPE html><html><head> <meta charset="UTF-8"/> <title></title> <style> .layout { display: flex; flex-direction: row; min-height: 100px; } .layout .left { width: 300px; background: red; } .layout .center { flex: 1; background: yellow; } .layout .right { width: 300px; background: blue; } </style></head><body> <section class="layout flex"> <div class="left"></div> <div class="center"> <h>flex解决方案</h> </div> <div class="right"></div> </section></body></html>flex
优点：比较完美
可以实现中间高度不设定，自动增加高度
方法四：
效果图1
效果图2
<!DOCTYPE html><html><head> <meta charset="UTF-8"/> <title></title> <style> .layout article div{ min-height: 100px; } .layout .left-right-center { width: 100%; display: table; height: 100px; } .layout .left-right-center>div { display: table-cell; } .layout .left { width: 300px; background: red; } .layout .center { background: yellow; } .layout .right { width: 300px; background: blue; } </style></head><body> <section class="layout flex"> <article class="left-right-center"> <div class="left"></div> <div class="center"> <h>table解决方案</h> </div> <div class="right"></div> </article> </section></body></html>表格布局
优点：容易做到，兼容性好，pc兼容ie8，flex不适用，表格布局可以，
缺点：每个部分理解为单元格，高度超出时，两侧同时增高
可以实现中间高度不设定，自动增加高度
方法五：
效果图1
效果图2
效果图3
<!DOCTYPE html><html><head> <meta charset="UTF-8"/> <title></title> <style> .layout article div{ min-height: 100px; } .layout .left-right-center { display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns: 300px auto 300px; } .layout .left { background: red; } .layout .center { background: yellow; } .layout .right { background: blue; } </style></head><body> <section class="layout flex"> <article class="left-right-center"> <div class="left"></div> <div class="center"> <h>grid网格布局解决方案</h> </div> <div class="right"></div> </article> </section></body></html>网格布局
优点：新技术，css标准化，不用模拟做网格，代码量简化
文章转载于:https://www.jianshu.com/p/260863abb0ca
原著是一个有趣的人,若有侵权,请通知删除
还没有人抢沙发呢~