html圣杯框架布局,圣杯布局 _HTML的技术博客_51CTO博客

圣杯布局

关键词：

外边距内边距

宽度高度

上下左右

位置相对绝对固定浮动

背景

样式：html>

圣杯布局

.shengbei{

min-height:200px;

margin:0 150px 0 300px;

}

.middle,.right,.left{

min-height:200px;

float:left;

position:relative;

}

.middle{

width:100%;

min-height:200px;

background:#ff0000;

}

.left{

width: 300px;

min-height: 200px;

background: #0026ff;

margin-left:-100%;

position:relative;

left:-300px;

}

.right{

width:150px;

min-height:200px;

background:#00ff21;

margin-left:-150px;

position:relative;

left:150px;

}

中

左

右

效果图：