三栏布局之圣杯布局

圣杯布局是左、中、右三栏被囊括在container中。固定左右两栏的宽度，让main栏，即中间栏自适应大小。基础代码如下：

<div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
</div>

先看一个container的内边距和content的关系：设置container的左右内边距为三栏布局中左右两栏的宽度。main设置为content的宽度，实现自适应。

1.设置left和right的宽度，分别为200px和300px;

.left{
            width: 200px;
            background-color: red;
        }
        .right{
            width: 300px;
            background-color: blue;
        }

2.设置container的padding，padding-left和padding-right的宽度分别是left和right的宽度，即200px,300px。在此设置顶部和底部为0.container的坐内边距、右内边距的宽度用于存放left、right。

.container{
            padding: 0 200px 0 300px;
        }

3.给container里面的left，right，和main设置一个统一的高度，为150px;

.main,.left,.right{
            min-height: 150px;
        }

4.main的宽度占据了container的content的全部宽度，所以，width:100%;

.main{
            background-color: yellow;
            width: 100%;
        }

5.让container里的三栏都相对定位且浮动

.container>div{
            position: relative;
            float: left;
        }

现在的情况是这样：

我要实现的样式是像下面这个这样：那么应该怎么做呢？

1.设置left的margin-left：-100%；将left设置到main的左边；

2.将right移动到main的右边：margin-left：-300px;

3.最后一步，将left和right移动到padding的left和right部分；left:-200px;right:-300px;

全部代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .left{
            width: 200px;
            background-color: blue;
            margin-left: -100%;
            left:-200px;
        }
        .right{
            width: 300px;
            background-color: red;
            margin-left: -300px;
            right:-300px;
        }
        .main{
            background-color: yellow;
            width: 100%;
        }
        .main,.left,.right{
            min-height: 150px;
        }
        .container{
            padding: 0 300px 0 200px;
            /* overflow:hidden; */
        }
        .container>div{
            position: relative;
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

三栏布局之圣杯布局

猜你喜欢