用五种不同的布局方式实现“左右300px中间自适应”的效果
float浮动
<section class="layout float"> <style media="screen"> .layout.float .left{ float: left; width: 300px; background: pink; } .layout.float .right{ float: right; width: 300px; background: lightblue; } .layout.float .center { background: lightyellow; } </style> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>浮动解决方案</h1> 1.这是三栏布局中的中间部分 2.这是三栏布局中的中间部分 </div> </article> </section>
absolute绝对定位
<section class="layout absolute"> <style media="screen"> .layout.absolute .left-right-center>div { position: absolute; } .layout.absolute .left { width: 300px; left: 0; background: lightblue; } .layout.absolute .right { width: 300px; right: 0; background: lightgreen; } .layout.absolute .center { left: 300px; right: 300px; background: pink; } </style> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>绝对定位解决方案</h1> 2.这是三栏布局的中间部分 </div> </article> </section>
flex布局
<section class="layout flexbox"> <style media="screen"> .layout.flexbox .left-center-right { margin-top: 140px; display: flex; } .layout.flexbox .left { width: 300px; background: lightcoral; } .layout.flexbox .center { flex:1; background: lightgray; } .layout.flexbox .center2 { flex:1; /*按照数字的比例自动分配剩余空间*/ background: lightgreen; } .layout.flexbox .right { width: 300px; background: lightblue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>flex布局解决方案</h1> 3.这是三栏布局的中间部分 </div> <div class="center2"> <h1>flex布局解决方案</h1> 3.这是三栏布局的中间部分 </div> <div class="right"></div> </article> </section>
table布局
<section class="layout table"> <style> .layout.table .left-center-right { width: 100%; height: 100px; display: table; } .layout.table .left-center-right>div { display: table-cell; } .layout.table .left { width: 300px; background: lightgreen; } .layout.table .center { background: pink; } .layout.table .right { width: 300px; background: lightblue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>table解决方案</h1> 4.这是三栏布局的中间部分 </div> <div class="right"></div> </article> </section>
grid网格布局
<section class="layout grid"> <style> .layout.grid .left-center-right { display: grid; width: 100%; grid-template-rows:100px; grid-template-columns:300px auto 300px; } .left { background: lightgreen; } .center { background: pink; } .right { background: lightblue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>网格布局解决方案</h1> 5.这是三栏布局的中间部分 </div> <div class="right"></div> </article> </section>
--- 所有笔记仅作个人整理,非全部原创,内容源自网络 ---