基于百分比的多列布局

Question

转自 http://www.javaeye.com/topic/785573

多列布局通常分成3种：第一种是每列都是固定宽度的；第二种其中1列是自适应宽度，剩余列是固定宽度；第三种是每都是百分比宽度。现在主要来说一下第三种。我们现在有个需求是页面平均分成左右2个部分。

    http://matthewjamestaylor.com/bl ... umn-double-page.htm 已经有了一个解决方案。但是我觉得他的html结构和css还是太复杂了，并且使用position:relative以及float等属性，这些属性在 ie6下会导致影响它们的父元素以及子元素的表现。比如relative的元素在ie6下一定要把他的每层上级父元素都设置为relative，就像感染了病毒一样。

    接下来就说说我的方案吧。我这里是主要是使用了display:inline-block的布局。

1. <style>
   
2.         .u {                               
   
3.             display: inline-block;
   
4.             zoom: 1; *display: inline; /* IE < 8: fake inline-block */
   
5.         }
   
6.        
   
7.         .u-1-2 {
   
8.                 width: 50%;
   
9.         }       
   
10.        
    
11.         #content_a {
    
12.                 height: 100px;
    
13.                 background-color: #336699;
    
14.         }       
    
15.        
    
16.         #content_b {
    
17.                 height: 50px;
    
18.                 background-color: #339966;
    
19.         }
    
20. </style>       
    
21. <div>
    
22.     <div id="d1" class="u u-1-2">
    
23.         <div id="content_a">
    
24.         </div>
    
25.     </div>
    
26.     <div id="d2" class="u u-1-2">
    
27.         <div id="content_b">
    
28.         </div>
    
29.     </div>
    
30. </div>

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

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

www.javaeye.com__c5a6ad01-e29b-3511-ab29-bc1840bccc2b.jpg (17.86 KB, 下载次数: 1)

下载附件

2011-03-16 15:19 上传

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

1. <div>
   
2.     <div id="d1" class="u u-1-2">
   
3.         <div id="content_a">
   
4.         </div>
   
5.     </div><!-- 避免空白元素
   
6. --><div id="d2" class="u u-1-2">
   
7.         <div id="content_b">
   
8.         </div>
   
9.     </div>
   
10. </div>

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

www.javaeye.com__bcf2d270-2617-3482-a768-fb0728ccc95d.jpg (17.53 KB, 下载次数: 1)

下载附件

2011-03-16 15:20 上传

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



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

    最后的代码如下：

1. <style>
   
2.         .u {                               
   
3.             display: inline-block;
   
4.             zoom: 1; *display: inline; /* IE < 8: fake inline-block */
   
5.                 vertical-align: top;
   
6.         }
   
7.        
   
8.         .u-1-2 {
   
9.                 width: 49.9999999%;
   
10.         }       
    
11.        
    
12.         #content_a {
    
13.                 height: 100px;
    
14.                 background-color: #336699;
    
15.         }       
    
16.        
    
17.         #content_b {
    
18.                 height: 50px;
    
19.                 background-color: #339966;
    
20.         }
    
21. </style>
    
22. <div>
    
23.     <div id="d1" class="u u-1-2">
    
24.         <div id="content_a">
    
25.         </div>
    
26.     </div><!-- 避免空白元素
    
27. --><div id="d2" class="u u-1-2">
    
28.         <div id="content_b">
    
29.         </div>
    
30.     </div>
    
31. </div>

复制代码效果如下：

www.javaeye.com__56f99c49-f01d-3d10-b3c3-44fbffcfdc35.jpg (16 KB, 下载次数: 2)

下载附件

2011-03-16 15:20 上传