三列布局——圣杯布局

作者: lx_smile | 来源:发表于2017-08-01 14:54 被阅读0次

实现三栏布局的六种方式
CSS 经典三列布局之圣杯布局
经典CSS布局：双飞翼和圣杯布局
CSS布局分类
圣杯布局和双飞翼布局
实现两边定宽，中间自适应
特殊布局方法
CSS布局
flex布局及常用属性
三列布局之圣杯布局、双飞翼布局

用圣杯布局实现两边宽度固定，中间自适应。

代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
        *{
            margin:0;
            padding:0;
          }
    
        header,footer{
            width: 100%;
            height: 40px;
            background-color: aquamarine;
        }

        .main{
            height: 100px;
            overflow: hidden;
            padding: 0 200px;
        }

        .middle{
            width: 100%;
            height: 100px;
            background-color: antiquewhite;
            float: left;
        }

        .left{
            margin-left: -100%;
            width: 200px;
            height: 100px;
            background-color: greenyellow;
            float: left;
            position: relative;
            left: -200px;
        }

        .right{
            margin-left: -200px;
            width: 200px;
            height: 100px;
            float: left;
            background-color: lightblue;
            position: relative;
            right: -200px;

        }
    </style>

</head>
<body>
<header>header</header>
<div class="main">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<footer>footer</footer>
</body>
</html>