演示示例,可以采用liveweave工具。地址:http://liveweave.com

更多牛逼的布局思想,可以参考老外的一个demo:http://blog.html.it/layoutgala/

一.列等高布局。

1.伪列布局

看看国内的w3school 首页:http://www.w3school.com.cn/

代码示例:

html:

<div id="wrapper">
    <div id="navsecond"><h1>左侧栏</h1><p style="height:500px;"></p></div>
    <div id="maincontent"><h1>中间栏</h1></div>
    <div id="sidebar"><h1>右侧栏</h1></div>
    <div id="footer" style="clear:both; height:80px; border:2px solid #666; background:#eee; "><h1>footer</h1></div>
</div>

css:

* { margin:0; padding:0; }
#wrapper { margin: 0 auto; width: 966px; background: transparent url('http://www.w3school.com.cn/i/site_wrapper.gif') top left repeat-y;}
#navsecond { float: left; margin: 0 0 0 12px; width: 150px; _display:inline; }
#maincontent { float: left; width: 637px;  }
#sidebar { float: left;  width: 150px;  }

原理很简单,给撑开的父包含框#wrapper定义背景图平铺即可。

缺点:

  • 列加border会崩溃
  • 不适合液态布局

需要注意的是,这并没有解决一个最根本的问题,也就是让两列真的等高。测试加上border便知。

从灵活性上来讲,这个布局技巧很尴尬,加border,不要border,就很费事。假如,我需要给两列都加上border,怎么办?

两边的border需要wrapper的背景图提供,而上下的border需要额外的html结构来模拟。蛋疼ing~~~。

还有一点,该布局是针对固定宽度布局而言,液态布局就崩溃了。

2.负边距布局。

html:

<div id="wrapper">
    <div id="main">
        <h1>主栏</h1>
        <p style="height:800px;">内容填充</p>
    </div>
    <div id="sider">
        <h1>侧边栏</h1>
    </div>
    <b id="footer"></b>
</div>

css:

* { margin:0; padding:0; }
#wrapper { width:960px; margin:0 auto; overflow:hidden; zoom:1; }
#sider, #main { padding-bottom:9999px; margin-bottom:-9999px; }
#main { float:right; width:600px; border:2px solid blue; }
#sider { float:left; width:300px; border:2px solid green; }
#footer { display:block; width:960px; margin:0 auto; height:2px; overflow:hidden; background:url('border.png') no-repeat;/*对两列底部border的补充*/ }

缺点:

  • border底部会崩溃,padding太大了
  • 不适合定位,两列的底部很深

尽管采用了负边距和正填充技术,但是,依然没有解决最核心的问题,就是两列高度依据最高的一列。

这个技术的高度不是最小高度,所以,还是带来了一系列的问题。相比伪列技术,灵活性更好些。

边框问题比较好解决。

 3.css3列等高实现:

 html:

<div id="wrapper">
    <div id="main">
        <h1>主栏</h1>
        <p style="height:800px;">内容填充</p>
    </div>
    <div id="sider">
        <h1>侧边栏</h1>
    </div>
    <div id="extra"><h1>多余的</h1></div>
</div>

css:(只写了-webkit 内核的样式,mozilla内核的,自行添加)

* { margin:0; padding:0; }
body { font:12px/1.5 arial; }
#wrapper { width:1200px; margin:0 auto;display:-webkit-box; display:box; }
#main { -webkit-box-flex:3; box-flex:3; background:#eee; margin:0 10px; -webkit-box-ordinal-group:2; border:2px solid green; }
#sider { width:300px; background:#eee; -webkit-box-ordinal-group:1; border:2px solid #ddd; }
#extra { -webkit-box-flex:1; background:#eee; -webkit-box-ordinal-group:3; border:2px solid #900; }

技术核心是父级包含框使用display:box,其内部列就等高啦。然后使用 box-ordinal-group进行位置显示排序。

缺点是,opera和IE9不支持啊。蛋疼~~~~

4.display:table-cell:

就是模拟表格。IE6,7不支持。另外,表格的显示不是block,在定位上需要额外的嵌套。不过,实现的的确是两列等高。

IE6,7死了的那天,这个技术就放光芒啦。

二.一列固定,一列自适应布局

 1.定位技巧:

html:

<div id="wrapper">
    <div id="main">
        <h1>主栏</h1>
        <p style="height:800px;">内容填充</p>
    </div>
    <div id="sider">
        <h1>侧边栏</h1>
    </div>
</div>

css:

* { margin:0; padding:0; }
body { font:12px/1.5 arial; }
#wrapper { margin:0 10px; position:relative;  }
#main { position:absolute; left:220px; top:0; right:0;  background:#eee; }
#sider { width:200px; min-height:400px; background:#808000;  }

这个技巧是存在使用上的局限性的。footer我放哪里啊?

wrapper高度没法自适应,因为main已经脱离了文档流。所以,你在博客园的首页,就可以看到,首页虽然用了此布局技术,但是他的footer位置可是在main里。

2.浮动和负边距:

这个技术应当算作比较成熟的技术了。稳定,稳定。不好的地方就是需要多一层标签。

html:

<div id="wrapper">
    <div id="main">
        <div class="inner">
            <h1>主栏</h1>
            <p style="height:800px;">内容填充</p>
        </div>
    </div>
    <div id="sider">
        <h1>侧边栏</h1>
    </div>
    <div id="footer">
        <h1>底部填充</h1>
    </div>
</div>

css:

* { margin:0; padding:0; }
body { font:12px/1.5 arial; }
#wrapper { min-width:1024px; overflow:hidden; }
#main { width:100%; float:left; margin-left:-200px; }
#main .inner { margin-left:200px; min-width:800px; background:#eee; }
#sider { width:200px; float:right; min-height:400px; background:#808000; }
#footer { clear:both; height:80px; background:#ccc; }

核心就是,父层偏移负边距,子层再偏回来。这个布局用的最多,也好用。嘎嘎~~~

3.BFC技巧:

 使用BFC技巧来做这个布局,对于结构的先后次序是有要求的。所以,此方法可以了解下,不适合大布局,小地方经常用到。

html:

<div id="wrapper">
    <div id="sider">
        <h1>侧边栏</h1>
    </div>
    <div id="main">
        <h1>主栏</h1>
        <p style="height:800px;">内容填充</p>
    </div>
    <div id="footer">
        <h1>底部填充</h1>
    </div>
</div>

css:

* { margin:0; padding:0; }
body { font:12px/1.5 arial; }
#wrapper { min-width:1024px; overflow:hidden; }
#main { min-width:700px; overflow:hidden; margin-left:200px; background:#eee;  }
#sider { float:left; width:200px; float:left; min-height:400px;  background:#808000; }
#footer { clear:both; height:80px; background:#ccc; }

好啦,就讲这么多,三列的布局可以由此扩展。另外,可以参考射雕提出的双飞翼布局。

以上的代码只是在chrome下测试了,其他浏览器是否存在bug,自行修复,重在思想。