解决方案主要有五种 首先写入全局样式 <style type="text/css"> html * { margin: 0; padding: 0;
. .. .
解决方案主要有五种
首先写入全局样式
.<style type="text/css"> html * { margin: 0; padding: 0; } .layout { margin-top: 20px; } .layout article div { min-height: 100px; } </style>.
1、用浮动解决方案
缺点：清除浮动，脱离文档流
优点：兼容性好
.<section class="layout float"> <style media="screen"> .layout.float .left { float: left; width: 300px; background: red; } .layout.float .right { float: right; width: 300px; background: blue; } .layout.float .center { background: yellow; text-align: center; } </style> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>浮动解决方案</h1> 1、这是三栏布局中间部分 2、这是三栏布局中间部分 </div> </article> </section>.
2、绝对定位解决方案
缺点：布局脱离文档流
优点：快捷
.<section class="layout absolute"> <style media="screen"> .layout.absolute .left-center-right > div { position: absolute; } .layout.absolute .left { background: red; width: 300px; left: 0; } .layout.absolute .right { background: blue; width: 300px; right: 0; } .layout.absolute .center { background: yellow; left: 300px; right: 300px; text-align: center; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>绝对定位解决方案</h2> 1、这是三栏布局绝对定位中间部分 2、这是三栏布局绝对定位中间部分 </div> <div class="right"></div> </article> </section>.
3、flexbox布局解决方案
优点：为了解决绝对定位和浮动不足，基本比较完美，移动端基本是flexbox
.<section class="layout flexbox"> <style> .layout.flexbox { margin-top: 150px; } .layout.flexbox .left-center-right { display: flex; } .layout.flexbox .left { width: 300px; background: red; } .layout.flexbox .right { width: 300px; background: blue; } .layout.flexbox .center { flex: 1; background: yellow; text-align: center; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>flexbox解决方案</h2> 1、这是三栏布局flexbox中间部分 2、这是三栏布局flexbox中间部分 </div> <div class="right"></div> </article> </section>.
4、表格布局解决方案
缺点：当某个单元格高度超过表格时，其他单元格也会调整高度
优点：表格在很多场景中还是很适用的，兼容性很好，当需要兼容ie8时
.
<section class="layout table"> <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; text-align: center; } .layout.table .right { width: 300px; background: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>表格布局解决方案</h2> 1、这是三栏布表格布局中间部分 2、这是三栏布表格布局中间部分 </div> <div class="right"></div> </article> </section>.
5、grid布局解决方案
缺点：
优点：代码简化
.
<section class="layout grid"> <style media="screen"> .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; text-align: center; } .layout.grid .right { background: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>网格布局解决方案</h2> 1、这是三栏布表网格布局中间部分 2、这是三栏布网格布局中间部分 </div> <div class="right"></div> </article> </section>. . .. .. .
