一:圣杯布局

实现原理:三个区域均为左浮动状态,main宽度为母容器的100%; 在两侧的侧栏中添加负边距以调整位置。 位于左侧的左边缘的边距左边缘为-100%,右侧的右边缘的边距左边缘为负宽度。 )浮动元素的负margin达到一定值时,其自身利用了向上移动的原理。 将左右侧栏的值设定为class=’container ‘的主容器中左右侧栏的位置空出,将侧栏的宽度设为填充的值。 将位置: relative添加到左和右,定位它们并将其移动到两侧。

! 文档类型html

html

头戴

meta charset=’UTF-8 ‘

title/title

style type=’text/css ‘

body{

margin: 0;

padding: 0;

}

. container{

最小窗口: 400 px;

高: 200 px;

后台: green;

padding: 0 200px;

}

. right, left{

width: 200px;

高: 200 px;

浮点:左;

}

. main{

width: 100%;

高: 200 px;

后台: blue;

浮点:左;

}

. left{

后台: orange;

margin-left:-100%;

position: relative;

left: -200px;

}

. right{

后台: orchid;

玛格琳- left :-200 px;

position: relative;

right: -200px;

}

/style

/head

实体

div class=’container ‘

div class=’main’main/div

div class=’left’left/div

div class=’right’right/div

/div

/body

/html

2 )双飞翼布局。

实现原理:在main中添加内容标签content,将其左右边距值设置为左右侧栏的宽度,去除main的背景色和高度

! 文档类型html

html

头戴

meta charset=’UTF-8 ‘

title/title

斯泰尔斯

body{

margin: 0;

padding: 0;

}

. container{

最小窗口: 400 px;

高: 200 px;

后台: green;

}

. right, left{

width: 200px;

高: 200 px;

浮点:左;

}

. main{

width: 100%;

高: 200 px;

后台: blue;

浮点:左;

}

. main-content{

margin: 0 200px;

}

. left{

后台: orange;

margin-left:-100%;

}

. right{

后台: orchid;

玛格琳- left :-200 px;

}

/style

/head

实体

div class=’container ‘

div class=’main ‘

div class=’ main-content ‘ main/div

/div

div class=’left’left/div

div class=’right’right/div

/div

/body

/html