经过一番终极搜索,终于找到了满意的解决方案:http://www.jb51.net/article/6585.htm。看罢,不禁替他拍案叫绝,这个思路真的是非常妙:
将一个div的宽度设为100%,然后设置其margin-left为负值(比如-200px),这样就将整个往左移动了一段距离,所以这个div里边的内容有一部分是看不到的。不过没关系,接下来在这个div里边再嵌入一个div,将其margin-left设为一个与外层div的margin-left数值相等的正值(比如200px),然后,在这个div里边的内容就都能被用户看到了。这样,一个始终距离右边一段距离(比如200px)的div就出现了,也就是我们想要的自适应宽度的左栏。
接下来,将左栏的float设为left,再加一个固定宽度(比如200px),float为left的右栏进来,这两个div就并排地显示在网页上了。
既然左栏和右栏的float都为left,那么底栏的clear设为both的话,就能始终停在高度最大的div(左栏或右栏)的下边了。
这样,就用纯css的手段解决了这个看似简单的问题了,成功了避免了js方案带来的复杂性。在这个解决方案中,将margin-left设为负值起了关键性的作用。实际上,在delicious的标签,以及百度空间首页的圆角矩形实现的方案中,都有用到margin为负值的方式来解决问题。不过,感觉这个还是用得最巧的。