三栏式布局(下)-CSDN博客

以下两种方式分别用float和position:absolute 实现，中间的自适应宽度都是用margin实现的，事实证明margin真的很方便！

方法1(position)：

.container{
    background-color: #eee;
    position:relative;
    overflow: auto;
}
.left,.right{
    position: absolute;
    top:20px;
}
.left{
    width:200px;
    left:20px;
}
.content{
   margin:0px 160px 0px 240px;
}
.right{
   right:20px;
   width:120px;
}

//这种方式存在的一个问题：container的高度是由content决定的，如果溢出，会出现滚动条。
                      这是因为最高的元素right设置了absolute定位。

方法二（float):

.container{
    background-color: #eee;
    position:relative;
    overflow: auto;
}
.left,.right{
    position: absolute;
    top:20px;
}
.left{
    width:200px;
    left:20px;
}
.content{
   margin:0px 160px 0px 240px;
}
.right{
   right:20px;
   width:120px;
}


//这种方式完全符合要求。但是有一点需要注意，html文件中right标签要写在content标签前面。如下：

 <body>
   <div class="container">
    <div class="left">
      <img src="images/eg_venus.gif" />
       <span>coding </span>
      </div>
      <div class="right">
       <img src="images/eg_merglobe.gif" />
       <img src="images/eg_planets.jpg" />
       <img src="images/eg_sun.gif" />
       <img src="images/eg_merglobe.gif" />
       <img src="images/yujinxiang.jpg" />
      </div>
       <div class="content">
       <p>我的团队</p>
       <p>我申请了好几个团队，目前还没有审核</p>
       <p>我申请了好几个团队，目前还没有审核</p>
       <p>我申请了好几个团队，目前还没有审核</p>
       <p>我申请了好几个团队，目前还没有审核</p>
       <p>我申请了好几个团队，目前还没有审核</p>
      </div>
    </div>
  </body>