以下两种方式分别用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>
完整代码地址：https://github.com/summer323/my-way-to-Front-end/tree/ife
最后：网上还有流传的负margin实现方法，个人感觉不利于维护。感兴趣的可以查一下。