css圣杯布局和双飞翼布局

一，圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。

方法一，圣杯布局

实现效果：左边固定宽度200px,右边固定宽度300px,中间自适应。

实现方法：主体部分三个子元素都设置浮动，左边子元素设置margin-left:-100%,右边子元素设置margin-left:-200px;

html结构：

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

css清单：

.container{
            padding:0 300px 0 200px;
            min-width:500px;
        }
        .left,.main,.right{
            position:relative;
            min-height:130px;
            float:left;
        }
        .left{
            left:-200px;
            width:200px;
            margin-left:-100%;
            background-color: #6190ef;
        }
        .main{
            width:100%;
            background-color: #e08e81;
        }
        .right{
            width:300px;
            right: -300px;
            margin-left:-300px;
            background-color: #d6f5ba;
        }

方法二：双飞翼布局

双飞翼布局解决问题的方案前一半是相同的，也是三栏全部左浮动，左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。

不同在于解决“中间栏div”内容不被遮拦问题的思路不一样。

html结构发生了变化：

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

css清单：

.left,.main,.right{
            min-height:130px;
            float:left;
            text-align: center;
        }
        .left{
            width:200px;
            margin-left:-100%;
            background-color: #6190ef;
        }
        .main{
            width:100%;
            background-color: #e08e81;
        }
        .main .content{
            margin:0 300px 0 200px;
        }
        .right{
            width:300px;
            margin-left:-300px;
            background-color: #d6f5ba;
        }

方法三：Flex布局

html结构：

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

css清单：

 .container{
            display: flex;
            height:150px;
        }
        .left{
            background-color: #ffa720;
            flex: 0 0 200px;
        }
        .center{
            background-color: #7081ff;
            flex: 1;
        }
        .right{
            background-color: #1cd2af;
            flex: 0 0 300px;
        }

方法四：绝对定位实现

html结构：

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

css清单：

.container{
            position:relative;
        }
        .left,.main,.right{
            top:0;
            min-height:130px;
        }
        .left{
            position:absolute;
            left:0;
            width:200px;
            background-color: #6190ef;
        }
        .main{
            margin:0 300px 0 200px;
            background-color: #e08e81;
        }
        .right{
            position:absolute;
            right:0;
            width:300px;
            background-color: #d6f5ba;
        }