1.position+margin
原理说明:通过绝对定位将两个侧栏固定,同样通过外边距给两个侧栏腾出空间,中间列自适应。
<style>
.left, .right {
position: absolute;
top: 0;
width: 200px;
height:40px;
background: red;
}
.left {
left: 0;
}
.right {
right: 0;
}
.main {
margin: 0 200px;
height:40px;
background: #000;
}
</style>
<div id="bd">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
2.float+margin
<style>
.left,.right{
height:40px;
background: yellow;
}
.left {
width: 100px;
float: left;
}
.right {
width: 200px;
float: right;
}
.main {
margin-left: 100px;
margin-right: 200px;
height:40px;
background: #000;
}
</style>
<div id="bd">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
3.圣杯布局(float+margin+padding+position:relative)
<style>
#bd {
padding: 0 230px 0 190px;
height:40px;
width:100%;
box-sizing: border-box;
}
.main {
float: left;
width: 100%;
height:40px;
background: #000;
}
.left {
float: left;
width: 190px;
margin-left: -100%;
position: relative;
left: -190px;
height:40px;
background: red;
}
.right {
float: left;
width: 230px;
margin-left: -230px;
position: relative;
right: -230px;
height:40px;
background: yellow;
}
</style>
<div id="bd">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
布局步骤:
- 三者都设置向左浮动。
- 设置main宽度为100%,设置两侧栏的宽度。
- 设置 负边距,left设置负左边距为100%,right设置负左边距为负的自身宽度。
- 设置main的padding值给左右两个子面板留出空间。
- 设置两个子面板为相对定位,left的left值为负的left宽度,right的right值为负的left宽度。
4.双飞翼布局(float+margin)
<style>
#main-wrap {
float: left;
width: 100%;
background: #000;
}
#main {
margin: 0 230px 0 190px;
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
background: yellow;
}
.extra {
float: left;
width: 230px;
margin-left: -230px;
background: red;
}
</style>
<div id="main-wrap" class="column">
<div id="main">#main</div>
</div>
<div class="sub">left</div>
<div class="extra">right</div>
布局步骤:
- 三者都设置向左浮动。
- 设置main-wrap宽度为100%,设置两个侧栏的宽度。
- 设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度。
- 设置main的margin值给左右两个子面板留出空间。
5.flex
<style>
#bd{display: flex}
.left,.right{
height:40px;
background: yellow;
}
.left {
width: 100px;
}
.right {
width: 200px;
}
.main {
height:40px;
background: #000;
flex:1;
}
</style>
<div id="bd">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>