三栏布局的几种方式

这里介绍几种三栏布局的实现方式,最终目的都是左右两边固定宽度,中间的自适应。 

最终效果如下:

6、绝对定位三栏布局

 

   <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>绝对定位三栏布局</title>
  <style>
    * {
      margin: 0;
    }
    div.wrap {
      position: relative;
    }
    div.main {
      height: 400px;
      margin: 10px 210px 0 310px;
      background: blue;
    }
    div.left {
      position: absolute;
      width: 300px;
      height: 400px;
      top: 0;
      left: 0;
      background: pink;
    }
    div.right {
      position: absolute;
      width: 200px;
      height: 400px;
      top: 0;
      right: 0;
      background: yellow;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>

优点: 简单。

缺点: 完美! 

 

 

posted @ 2019-06-26 17:51  爱笑的小宇宙  阅读(195)  评论(0编辑  收藏  举报