三列高度一致布局实例
完成以下布局：
1.? ? ? ? 三列布局， 自适应整个屏幕；
2.? ? ? ? 其中左右固定宽度，中列自适应其余宽度；
3.? ? ? ? 无论三列内容多少，三列高度等高；
如下图所示，请写出代码。
[attach]100[/attach]
下面我跟大家一起来完成这道面试题：
1.? ? ? ? 根据结构、表现和行为的顺序，我们先来完成结构部分——HTML代码，如下：
<body>
<div class="wrap">
??<div class="left">
??? ? ? ? <h3>左侧边栏</h3>
? ? <ul>
? ? ? ? ? ? <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ?? ?<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ?? ?<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ? </ul>
??</div>
??<div class="right">
??? ? ? ? <h3>右侧边栏</h3>
? ? <ul>
? ? ? ? ? ? <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ? </ul>
??</div>
??<div class="center">
??? ? ? ? <h3>中间边栏</h3>
??? ? ? ? <ul>
? ? ? ? ? ? <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ???<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
? ? </ul>
? ?<span style="float:right; position:relative;"> </span> <!--for ie6-->
? ?? ???</div>
</div>
</body>
2.? ? ? ? 然后再完成表现部分——CSS样式代码：
<style type="text/css">
*{margin:0;padding:0;}
body{font-family:"微软雅黑";font-size:13px;padding:0 10px;}
a{color:#333; text-decoration:none;}
.wrap{overflow:hidden;}
.wrap ul{list-style:none;padding:0 0 0 25px;}
.left{width:240px;background:#F1f1f1;float:left; }
.left h3,.right h3,.center h3{line-height:35px;font-size:13px;padding-left:10px;}
.right{width:240px;background:#F1f1f1;float:right;}
.center{background:#e8e8e8;margin:0 10px;_float:left;/*ie6 hack*/overflow:hidden;}
.row{margin-bottom:-10000px;padding-bottom:10000px;}
</style>
完成以下步骤两部之后的效果如下：
[attach]101[/attach]
3.? ? ? ? 现在我们只要完成最后一个问题，就是三栏登高，其解决方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。
在样式表中添加此代码：.row{margin-bottom:-10000px;padding-bottom:10000px;}，而后，将此选择器分别添加到left、right、center中，而后便完成了本题。
资料来源参看：http://elearning.5myworld.com/lesson/2010/1021/lesson_33.html
