基于百分比的多列布局
??? 多列布局通常分成3种：第一种是每列都是固定宽度的；第二种其中1列是自适应宽度，剩余列是固定宽度；第三种是每都是百分比宽度。现在主要来说一下第三种。我们现在有个需求是页面平均分成左右2个部分。
??? http://matthewjamestaylor.com/blog/perfect-2-column-double-page.htm 已经有了一个解决方案。但是我觉得他的html结构和css还是太复杂了，并且使用position:relative以及float等属性，这些属性在ie6下会导致影响它们的父元素以及子元素的表现。比如relative的元素在ie6下一定要把他的每层上级父元素都设置为relative，就像感染了病毒一样。
??? 接下来就说说我的方案吧。我这里是主要是使用了display:inline-block的布局。
?
??? 为什么呢？注意看dom结构里面d1和d2之间其实是有空白字符的，有换行符和tab缩进。所以浏览器在解析的时候也计算了这些字符的宽度。所以d1、d2再加上这些宽度总宽度就超过了100%所以导致了换行。所以接下来我们就把空白字符去掉。我使用了注释来保留缩进，这样比较容易排列。
?
?
??? 这样做已经能够在ie8,firefox,safari,chrome下显示正常了。但是在ie6和ie7下还是会换行。
?
??? 经过不断的尝试，发现只要把width:50%改成width:49.999999%就能在ie6和ie7下面实现效果。然后再美化一下让d1和d2垂直居上对齐，这个效果就完成了。
??? 最后的代码如下：
?
1 楼 slippy 2010-10-21 多谢分享 2 楼 nqykl 2010-12-20 恩 楼主这个发现挺重要的。呵呵 3 楼 lidong2001 2011-03-06 其实从三层分离的角度说，csser不一定能100%控制后台输出的内容，所以得假定就是有这个空白符。
而这个空白符可以用letter-spacing:-1em;的方式kill掉。
