实现原理：三个区域均为左浮动状态，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
支付宝扫一扫
微信扫一扫
