圣杯布局(float + 负margin + padding + position)
注意:
-
三者都设置向左浮动。
-
设置grail_main宽度为100%,设置两侧栏的宽度。
-
设置 负边距,grail_left设置负左边距为100%,grail_right设置负左边距为负的自身宽度。
-
设置grail的padding值给左右两个子面板留出空间。
-
设置两个子面板为相对定位,grail_left的left值为负的grail_left宽度,grail_right的right值为负的grail_right宽度。
<section class="grail">
<style>
.grail {
padding-left: 100px;
padding-right: 200px;
overflow: hidden;
}
.grail>div {
min-height: 100px;
float: left;
text-align: center;
line-height: 100px;
}
.grail>.grail_main {
width: 100%;
background: #ccc;
}
.grail>.grail_left {
width: 100px;
margin-left: -100%;
position: relative;
left: -100px;
background: #999;
}
.grail>.grail_right {
width: 200px;
margin-left: -200px;
position: relative;
right: -200px;
background: #aaa;
}
</style>
<div class="grail_main">圣杯布局main</div>
<div class="grail_left">left</div>
<div class="grail_right">right</div>
</section>
双飞翼布局 (float + 负margin + margin)
注意:
-
三者都设置向左浮动。
-
设置main-wrap宽度为100%,设置两个侧栏的宽度。
-
设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度。
-
设置main的margin值给左右两个子面板留出空间。
<section class="wing">
<style>
.wing {
overflow: hidden;
}
.wing div {
min-height: 100px;
text-align: center;
}
.wing>.wrap {
float: left;
width: 100%;
background: #ccc;
}
.main {
margin: 0 200px 0 100px;
}
.wing>.left {
float: left;
width: 100px;
margin-left: -100%;
background: #999;
}
.wing>.right {
float: left;
width: 200px;
margin-left: -200px;
background: #aaa;
}
</style>
<div class="wrap">
<div class="main">双飞翼布局main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</section>