职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 368|回复: 5

基于百分比的多列布局

[复制链接]
爱车车 发表于 2011-7-14 10:11 | 显示全部楼层 |阅读模式
     多列布局通常分成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的布局。
Html代码  
<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>  

<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%所以导致了换行。所以接下来我们就把空白字符去掉。我使用了注释来保留缩进,这样比较容易排列。
Html代码  
<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>  

<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垂直居上对齐,这个效果就完成了。
    最后的代码如下:

Html代码  
<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>  

<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>

效果如下:




大小: 17.9 KB

大小: 17.5 KB

大小: 16 KB
查看图片附件

芷馨 发表于 2011-7-14 10:11 | 显示全部楼层
多谢分享

会玩就好 发表于 2011-7-14 10:11 | 显示全部楼层
恩 楼主这个发现挺重要的。呵呵

紫衿 发表于 2011-7-14 10:11 | 显示全部楼层
其实从三层分离的角度说,csser不一定能100%控制后台输出的内容,所以得假定就是有这个空白符。

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


愚人 发表于 2011-7-16 12:22 | 显示全部楼层
君子以自强不息 地势坤 君子以厚德载物
shmilyyu 发表于 2011-7-20 19:14 | 显示全部楼层
嘿...反了反了,,,,
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-3-28 15:59 , Processed in 0.134837 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表