第14天笔记

2.2、圣杯实现步骤

- 外框左右固定padding值，预留左侧列和右侧列的列宽

- .center宽度100%，.left，.right固定宽度

- 结构上.center，.left，.right依次浮动在一行排列

- 移动.left通过margin-left:-100%；配合相对定位position:relative；left:-200px；移动至左侧列位置

- 移动.right通过margin-left:-200px；配合相对定位position:relative；left:200px；移动至右侧列位置

### 3、双飞翼

**HTML**

```html

<div class="wrap">

    <div class="centerbox">

    <div class="center">中间</div>

    </div>

    <div class="left">左侧</div>

    <div class="right">右侧</div>

</div>

```

**CSS**

```css

   .wrap:after {

            content: "";

            display: block;

            clear: both;

        }

        .wrap {

            border: 1px solid #000;

            min-width:600px;

           

        }

        .left,

        .centerbox,

        .right {

            float: left;

        }

        .centerbox{

            width:100%;

        }

        .left {

            margin-left:-100%;

            width: 200px;

            min-height: 200px;

            background-color: pink;

            margin-left: -100%;

         

        }

        .right {

            margin-left:-200px;

            width: 200px;

            min-height: 200px;

            background-color: skyblue;

            margin-left: -200px;

         

        }

        .center {

           margin:0 200px;

            min-height: 200px;

            background-color: yellowgreen;

        }

```

#### 3.1、双飞翼实现步骤

- .centerbox与.left，.right浮动在一行排列

- .centerbox固定宽度100%，left，.right固定宽度

- .centerbox内部嵌套.center，不定宽度，通过定义左右margin留出左侧列的宽和右侧列宽

- 移动.left通过margin-left:-100%；实现

- 移动.right通过margin-left:-200px；实现