原理说明:
- 主面板设置宽度为100%,主面板和两个侧栏都设置浮动,常见为左浮动,这个两个侧栏会被主面板挤下去,通过设置负边距将浮动的侧栏拉上来,左侧栏的负边距为100%,刚好是窗口的宽度,因此会从主面板下面的左边跑到与主面板对齐的左边,右侧栏此时浮动在主面板下面的左边,设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。
- 为了避免侧栏遮挡主面板内容,在外层设置左右padding值为左右侧栏的宽度,给侧栏腾出空间,此时主面板的宽度减小。由于侧栏的负边距是相对主面板的,所以两个侧栏并不会像我们理想中的停靠在左右两边,而是跟着缩小的主面板一起向中间靠拢,此时使用相对布局,调整两个侧栏到相应的位置。
html
<div class="container">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
布局步骤:
- 三者都设置向左浮动
- 设置main宽度为100%,设置两侧栏的宽度
- 设置负边距,sub为负左边距为100%,extra设置负左边距为自身宽度
- 设置main的padding值为左右两个面板留出空间
- 设置两个侧栏为相对定位,sub的left值为负的sub宽度,extra的right值为负的extra宽度
css
.container{
padding:0 230px 0 190px;
}
.main{
float:left;
width:100%;
}
.sub{
float:left;
width:190px;
margin-left:-100%;
position:relative;
left:-190px;
}
.extra{
float:left;
width:230px;
margin-left:-230px;
position:relative;
right:-230px;
}
ps:DOM元素的书写顺序不得更改
end
一盏灯, 一片昏黄; 一简书, 一杯淡茶。 守着那一份淡定, 品读属于自己的寂寞。 保持淡定, 才能欣赏到最美丽的风景! 保持淡定, 人生从此不再寂寞。