基于百分比的多列布局

    多列布局通常分成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的布局。

<style>
	.u {				
	    display: inline-block;
	    zoom: 1; *display: inline; /* IE < 8: fake inline-block */
	}
	
	.u-1-2 {
		width: 50%;
	}	
	
	#content_a {
		height: 100px;
		background-color: #336699;
	}	
	
	#content_b {
		height: 50px;
		background-color: #339966;
	}
</style>	
<div>
    <div id="d1" class="u u-1-2">
        <div id="content_a">
        </div>
    </div>
    <div id="d2" class="u u-1-2">
        <div id="content_b">
        </div>
    </div>
</div>

    classname:u 定义了inline-block，classname:u-1-2定义了50%的宽度。所以d1和d2两个元素合在一起是50%，应该就是并排在一起的2个div了。

 

    但是实际上呢？2个元素还是垂直排列的。

 

    为什么呢？注意看dom结构里面d1和d2之间其实是有空白字符的，有换行符和tab缩进。所以浏览器在解析的时候也计算了这些字符的宽度。所以d1、d2再加上这些宽度总宽度就超过了100%所以导致了换行。所以接下来我们就把空白字符去掉。我使用了注释来保留缩进，这样比较容易排列。

<div>
    <div id="d1" class="u u-1-2">
        <div id="content_a">
        </div>
    </div><!-- 避免空白元素
 --><div id="d2" class="u u-1-2">
        <div id="content_b">
        </div>
    </div>
</div>

 

 

    这样，我们在firefox上就得到了想要的效果。

 

 

 

    这样做已经能够在ie8,firefox,safari,chrome下显示正常了。但是在ie6和ie7下还是会换行。

 

    经过不断的尝试，发现只要把width:50%改成width:49.999999%就能在ie6和ie7下面实现效果。然后再美化一下让d1和d2垂直居上对齐，这个效果就完成了。

    最后的代码如下：

 

<style>
	.u {				
	    display: inline-block;
	    zoom: 1; *display: inline; /* IE < 8: fake inline-block */
		vertical-align: top;
	}
	
	.u-1-2 {
		width: 49.9999999%;
	}	
	
	#content_a {
		height: 100px;
		background-color: #336699;
	}	
	
	#content_b {
		height: 50px;
		background-color: #339966;
	}
</style>
<div>
    <div id="d1" class="u u-1-2">
        <div id="content_a">
        </div>
    </div><!-- 避免空白元素
 --><div id="d2" class="u u-1-2">
        <div id="content_b">
        </div>
    </div>
</div>

 

 

效果如下：

 

 

评论

3 楼 lidong2001 2011-03-06  

其实从三层分离的角度说，csser不一定能100%控制后台输出的内容，所以得假定就是有这个空白符。

而这个空白符可以用letter-spacing:-1em;的方式kill掉。

2 楼 nqykl 2010-12-20  

恩 楼主这个发现挺重要的。呵呵

1 楼 slippy 2010-10-21  

多谢分享