兩欄布局
float+margin
<div class="left">定寬</div>
<div class="right">自適應(yīng)</div>
.left{
width: 100px;
height: 300px;
background: red;
float: left;
text-align: center;
line-height: 300px;
color: #fff;
}
.right{
height: 300px;
background: yellow;
text-align: center;
margin-left: 140px;
}
image.png
position+margin
通過絕對定位將側(cè)欄固定柜与，通過外邊距給側(cè)欄騰出空間是偷，中間列自適應(yīng)内列。(效果圖同上）
<div class="left">left</div>
<div class="main">自適應(yīng)內(nèi)容自適應(yīng)內(nèi)容</div>
.left{
width: 100px;
height: 300px;
background: red;
position: absolute;
top: 0;
left: 0;
}
.main{
margin-left: 200px;
height: 300px;
background: yellow;
}
三欄布局
- .左右兩欄使用float屬性孽锥，中間欄使用margin屬性進(jìn)行撐開咐汞。
<div class="left">左欄</div>
<div class="right">右欄</div>
<div class="main">自適應(yīng)</div>
.left{
width: 200px;height: 300px; background: yellow; float: left;
}
.right{
width: 150px; height: 300px; background: green; float: right;
}
.main{
height: 300px; background: red; margin-left: 220px; margin-right: 160px;
}
- 使用position定位實(shí)現(xiàn)概行，即左右兩欄使用position進(jìn)行定位蠢挡，中間欄使用margin進(jìn)行定位
<div class="left">left</div>
<div class="main">自適應(yīng)內(nèi)容自適應(yīng)內(nèi)容</div>
<div class="right">right</div>
.left,
.right{
width: 100px;
height: 300px;
background: red;
position: absolute;
top: 0;
}
.main{
margin:0 140px;
height: 300px;
background: yellow;
}
.left{
left: 0;
}
.right{
right: 0
}
圣杯布局(float + 負(fù)margin + padding + position)
占坑
雙飛翼布局(float + 負(fù)margin + margin)
占坑
