两栏布局

float+margin

  <div class="left">定宽</div>
  <div class="right">自适应</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

通过绝对定位将侧栏固定，通过外边距给侧栏腾出空间，中间列自适应。(效果图同上）

<div class="left">left</div>
<div class="main">自适应内容自适应内容</div>
.left{
  width: 100px;
  height: 300px;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
}
.main{
  margin-left: 200px;
  height: 300px;
  background: yellow;

}

三栏布局

• .左右两栏使用float属性，中间栏使用margin属性进行撑开。

<div class="left">左栏</div>
<div class="right">右栏</div>
<div class="main">自适应</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定位实现，即左右两栏使用position进行定位，中间栏使用margin进行定位

  <div class="left">left</div>
  <div class="main">自适应内容自适应内容</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 + 负margin + padding + position)

占坑

双飞翼布局(float + 负margin + margin)

占坑