完成以下布局：
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
分享到：
相关推荐
zi-three-3.html ----6.8.6三列布局中有一列内容固定。 zi-three-all.html ----6.8.7 三列布局中高度都不确定的情况。 源文件\04 show.html ----第6章中制作的一个简单页面框架。 源文件\05 ...
网上的解释基本一致，就是ListView布局时height和width都不是fill_parent，导致不断计算高度，不断刷新。或者说它的父容器没有设置成fill_parent。 可以布局太复杂的情况下，全部按照fill_parent去调整不现实。所以...
-GetNodeById更名为FindNode，保持和FindControl一致命名。 -删除CheckedNodeIDArray属性，增加GetCheckedNodes和GetCheckedNodeIDs函数。 -删除ExpandedNodeIDArray属性，增加GetExpandedNodes和...
（3）在设计数据库时，一方面要尽可能的减少冗余度，减少存储空间的占用，降低数据的一致性问题发生的可能性；另一方面，还要考虑适当的冗余，以提高运行速度、降低开发难度。 （4）必须维护数据的正确性和一致性，...
-Window的实例方法GetCloseReference等以及ActiveWindow的静态方法GetCloseReference等，其中的Close全部改为Hide。 -增加TabStrip中Tab控件可关闭属性EnableClose(默认为false)以及两个方法GetShowReference和...
windowIsTranslucent">true</item>Tips.2因状态栏透明，输入法的adjustPan模式不会生效，建议设置为adjustResizeTips.3因状态栏透明，布局会从屏幕顶端开始绘制，需自行调整paddingTop//获取状态栏的高度public int...
除了主题外，还可以定义母版页，以使应用程序中的页具有一致的布局。一个母版页可以定义您希望应用程序中的所有页（或一组页）所具有的布局和标准行为。然后可以创建包含要显示的页特定内容的各个内容页。当用户请求...
（3）针对页面自适应问题，本文结合渐进增强以及拥抱流式布局的思想，同时研究利用了移动设备的视口特性，实现跨分辨率、跨设备的页面自适应。 （4）针对系统的功能实现问题，通过结合利用原生态框架与HTML5的跨平台...
� 良好的盈利模式（ 3/7 开），产业链条的各方：运营商、制造商、独立软件生产商都可以获得不错的利 益 。 将移动终端的评价标准从硬件向软件转变，极大的激发了软件开发者的热情。 � Android 的源代码遵循 Apache...
“库文件名”以.lib或.obj为后缀的将被视为静态库，可使用绝对路径或相对路径（相对当前源代码所在目录），如依赖多个静态库请分别列出并以逗号分隔；“在库中的对应命令名”请务必准确填写静态库中公开导出的符号...
WNetAddConnection3 创建同一个网络资源的连接 WNetCancelConnection 结束一个网络连接 WNetCancelConnection2 结束一个网络连接 WNetCloseEnum 结束一次枚举操作 WNetConnectionDialog 启动一个标准对话框，...
请将 %2 （卷标序列号: %3）插入驱动器 %1。 0036 打开共享的文件太多。 0038 已到达文件结尾。 0039 磁盘已满。 0050 不支持此网络请求。 0051 远程计算机无法使用。 0052 网络中存在重名...