html聖杯布局,HTML+CSS實作聖杯布局！

實作聖杯布局有2中方法：

1、flex布局：(推薦)

爸爸直接上代碼:

header

left

middle

right

footer

下面是CSS代碼：

html, body{ padding: 0; margin: 0; text-align: center;}

header, footer{ border: 1px solid #333; background: #ccc;}

section{ display: flex;}

.left{ width: 200px; background: red;}

.middle{ flex: 1; background: green;}

.right{ width: 200px; background: blue;}

2、浮動非主流(float)

HTML代碼：需要把middle放在最前面

header

middle

left

right

footer

上樣式：

html, body{

padding: 0;

margin: 0;

text-align: center;

}

header, footer{

border: 1px solid #333333;

background: #CCCCCC;

}

footer{

clear: both;

}

section{

padding: 0 200px 0 200px;

overflow: hidden;

}

.left, .middle, .right{

position: relative;

float: left;

}

.middle{

width: 100%;

background: green;

}

.left{

margin-left: -100%;

left: -200px;

width: 200px;

background: red;

}

.right{

margin-left: -200px;

right: -200px;

width: 200px;

background: blue;

}

下面是效果圖，效果是一樣的！

11221190629.png