您的位置 >>> 星想互联 >>> 编程技术 >>> HTML5+CSS3
七种方法实现三栏布局
点击数:298  发布时间2018-06-26 15:06:39
<!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>
来源:咸宁网站建设