右栏固定,左栏自适应宽度且先出现的一种实现方案

经过一番终极搜索,终于找到了满意的解决方案: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为负值的方式来解决问题。不过,感觉这个还是用得最巧的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值