七种方法实现三栏布局

xiaoxiao2021-03-01  4

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>常用三栏布局</title> <style type="text/css"> html * { margin: 0; padding: 0; } .layout article>div { height: 100px; } .layout .left { width: 100px; background: red; } .layout .right { width: 200px; background: blue; } .layout .center { background: green; } </style> </head> <body> <!--浮动布局--> <section class="layout float"> <style type="text/css"> .layout.float .left { float: left; } .layout.float .right { float: right; } </style> <h1>浮动布局</h1> <article> <div class="left"></div> <div class="right"></div> <div class="center"> 浮动布局解决方案 浮动布局解决方案 浮动布局解决方案 </div> </article> </section> <!--定位布局--> <section class="layout absolute"> <style type="text/css"> .layout.absolute article>div { position: absolute; } .layout.absolute .left { left: 0; } .layout.absolute .right { right: 0; } .layout.absolute .center { left: 100px; right: 200px; } </style> <h1>定位布局</h1> <article> <div class="left"></div> <div class="right"></div> <div class="center"> 定位布局解决方案 定位布局解决方案 定位布局解决方案 </div> </article> </section> <!--弹性布局--> <section class="layout flex"> <style type="text/css"> .layout.flex { margin-top: 100px; } .layout.flex article { display: flex; } .layout.flex .center { flex: 1; } </style> <h1>弹性布局</h1> <article> <div class="left"></div> <div class="center"> 弹性布局解决方案 弹性布局解决方案 弹性布局解决方案 </div> <div class="right"></div> </article> </section> <!--表格布局--> <section class="layout table"> <style type="text/css"> .layout.table article { display: table; width: 100%; } .layout.table article>div { display: table-cell; } </style> <h1>表格布局</h1> <article> <div class="left"></div> <div class="center"> 表格布局解决方案 表格布局解决方案 表格布局解决方案 </div> <div class="right"></div> </article> </section> <!--网格布局--> <section class="layout grid"> <style type="text/css"> .layout.grid article { display: grid; grid-template-columns: 100px auto 200px; } </style> <h1>网格布局</h1> <article> <div class="left"></div> <div class="center"> 网格布局解决方案 网格布局解决方案 网格布局解决方案 </div> <div class="right"></div> </article> </section> <!--双飞翼布局--> <section class="layout wing"> <style type="text/css"> .layout.wing article>div{ float: left; } .layout.wing .center{ width: 100%; } .layout.wing .main{ margin-left: 100px; margin-right: 200px; } .layout.wing .left{ margin-left: -100%; } .layout.wing .right{ margin-left: -200px; } </style> <h1>双飞翼布局</h1> <article> <div class="center"> <div class="main"> 双飞翼布局解决方案 双飞翼布局解决方案 双飞翼布局解决方案</div> </div> <div class="left"></div> <div class="right"></div> </article> </section> <!--圣杯布局--> <section class="layout grial"> <style type="text/css"> .layout.grial article{ margin-left: 100px; margin-right: 200px; } .layout.grial article>div{ position: relative; float: left; } .layout.grial .center{ width: 100%; } .layout.grial .left{ margin-left: -100%; left: -100px; } .layout.grial .right{ margin-left: -200px; right: -200px; } </style> <h1>圣杯布局</h1> <article> <div class="center"> 圣杯布局解决方案 圣杯布局解决方案 圣杯布局解决方案 </div> <div class="left"></div> <div class="right"></div> </article> </section> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-3100078.html

最新回复(0)