超越起点 追随自由 我想故我所有

我看不见,我的明天,但今天,绝不重复昨天;顺风是滑翔,逆风才是飞翔,火烧过才能化凤凰!总想对你表白,我的心情是多么豪迈
总想对你倾诉,我对生活是多么热爱

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

今天偶然一个灵动解决了两年来一直未能解决的“难题”,如标题。

遇到这个问题就很麻烦,通常解决办法为双左浮动(float: left;),然后对右栏宽度使用IE的私有属性(屏宽减左栏和浏览器边框),反正一般OA系统都是使用IE,但是即便基于IE同核心的不同浏览器,由于计算的误差,总是不能完美解决自适应问题。再加上如果要应用在Firefox上,则只能固定宽度。js?谁会?我不熟而且懒。

废话不多说了,直接给出解决方法如下:

思路:左栏飞起来(absolute),右栏不受影响仍然100%宽度,再使用父级tag的padding-left将右栏水平起点推到左栏水平终点,OK。

结构代码:
<div class="x">
<div class="a">左栏</div>
<div class="b">右栏</div>
</div>

CSS部分:
.x{position: relative; padding-left: 200px;}
.a{position: absolute; left: -200px;}

缺点:由于a浮动,所以a的高度不会影响其他块元素,那么如果a的高度高于b(例如很长的树或者b未定高又遇到短页),则会出现问题,有待解决(目前建议b定高并且a定高自动下拉)。但是在a可知或可控高度情况下简单且完美的解决了右栏自适应问题。

温馨提示:活用最外层的body或者form标签会有意想不到的好处,例如例子中的x可以没有。此例举一反三能有更多妙用。老少兼益,童叟无欺……

如果谁知道这个问题其他解决办法,请告知。

所以css就是这么一个东西,技巧性的,你说解决这个难题需要多高的技术水平?方法也很简单,但是它就卡了我或者还有你们那么长的时间。

posted on 2006-03-28 21:44  爆牙齿  阅读(1582)  评论(4编辑  收藏  举报