圣杯布局应用

圣杯布局

**HTML**

```HTML

<div class="wrap">

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

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

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

</div>

```

**CSS**

```css

.wrap:after{

content:"";

display: block;

clear: both;

}

.wrap{

border:1px solid #000;

padding:0 200px;

min-width:200px;

}

.left,.center,.right{

float:left;

}

.left{

width:200px;

min-height:200px;

background-color: pink;

margin-left:-100%;

position: relative;

left:-200px;

}

.right{

width:200px;

min-height:200px;

background-color: skyblue;

margin-left:-200px;

position:relative;

left:200px;

}

.center{

width:100%;

min-height:200px;

background-color: yellowgreen;

}

```

#### 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;

}

```