html圣杯布局,利用html+css制作圣杯布局_2018年8月18日

实例

html>

圣杯布局

.content {

width: 600px;

background-color: lightblue;

margin: auto;

padding: 0 200px;

overflow: hidden;

}

.main {

width: 100%;

background-color: yellow;

height: 600px;

float: left;

}

.left {

width: 200px;

height: 600px;

background-color: blue;

float: left;

margin-left: -100%;

position: relative;

left: -200px;

}

.right {

width: 200px;

height: 600px;

background-color: burlywood;

float: left;

margin-left: -200px;

position: relative;

right: -200px;

}

主体内容

左边栏

右边栏

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结

1、对最后的相对定位没有搞懂，为什么要利用相对定位，不是移动上去了，应该就可以把位置显示出来了啊。

2、不是我移动了-100%的百分对吗，应该是直接到最初的位置。

猜测：

1、虽然我们移动了-100%百分比，但是这个是建立在父元素上面，因为父元素已经改变了大小，是600像素了，所以要利用相对定位，将-200往后移动。所以右边也一样的。