完成以下布局：
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
分享到：
相关推荐
本教程将深入探讨Android的五大主要布局：线性布局（LinearLayout）、相对布局（RelativeLayout）、帧布局（FrameLayout）、表格布局（TableLayout）以及约束布局（ConstraintLayout），并提供实例来帮助理解其工作...
在这个"网格布局实例"中，我们将深入探讨网格系统的核心概念、优势以及如何自定义和实现。 首先，网格布局是基于一系列水平和垂直线的框架，这些线形成了单元格，元素则放置在这些单元格中。这种结构提供了设计的...
总的来说，这个布局实例巧妙地利用了CSS的浮动、居中对齐和内边距等特性，实现了三行两列的高度自适应布局，同时考虑到跨浏览器兼容性，特别是在处理Firefox与IE之间的差异时，采用了额外的层和特定的CSS规则。...
- **调整框架高度**：将获取到的高度赋值给父框架的CSS高度属性，确保框架高度与内容高度一致。 - **兼容性处理**：考虑到浏览器的差异性和移动设备，可能需要对不同环境做兼容性处理，例如使用`$(window).on('...
通过为每个列设置负的`margin-bottom`和对应的正`padding-bottom`，然后利用容器的`overflow:hidden`属性来裁剪溢出的内容，可以确保所有列的高度一致，即使它们的内容长度不同。在示例中，每个列都有300px的固定...
这两个类允许开发者通过百分比设置子视图的宽度、高度以及边距，而不是固定像素值，这样可以确保在不同屏幕尺寸上保持一致的视觉体验。 1. **PercentRelativeLayout**： - PercentRelativeLayout继承自...
滑动门布局主要利用CSS的切片技巧，将一个按钮或元素分为上下两部分（或者更多部分），通过调整上下部分的宽度或高度，实现鼠标悬停时按钮边缘的平滑过渡效果。这种方法可以让按钮看起来像有一扇门在滑动，增加了...
在iOS开发中，UITableView是展示数据的常用控件，它以行和列的形式组织内容，类似于桌面应用中的列表。在实际开发过程中，我们可能会遇到一个常见的问题：UITableView中的cell高度不一致，这会影响用户界面的美观性...
而在瀑布流布局中，元素则会像瀑布一样自上而下流动，同时保持每列的高度一致。 Isotope的功能实现离不开两个关键组件：jQuery库和Isotope插件本身。在提供的压缩包中，我们可以看到`jquery.isotope.js`和`jquery....
为了更好地掌握这些控件，开发者应练习创建不同的布局实例，尝试调整控件属性，观察布局的变化，并理解每种布局如何响应屏幕尺寸和方向的变化。通过不断实践和调试，开发者能够更熟练地运用这些基础知识，从而设计出...
响应式布局是现代网页设计的关键技术之一...总之，响应式布局是确保网站在多设备环境下用户体验一致的重要手段。通过学习和实践这个HTML5响应式布局小案例，我们可以掌握这项技能，为创建适应未来的网站打下坚实基础。
文档通过提供CSS布局实例，一步步地引导读者从确定布局开始，到定义body样式和主要div，最终实现100%自适应高度的布局。这包括了不用表格实现的菜单布局，无论是纵向还是横向。 ### 常见错误和校验 文档还指出了...
3. 在设计时，考虑多种屏幕尺寸和分辨率，测试不同设备上的布局表现，以确保用户体验的一致性。 六、实例解析 在TestPercent项目中，你可能已经创建了一个包含百分比布局的示例。这个例子可能展示了如何在...
"Android四等分布局Demo"是一个典型的实例，它展示了如何将屏幕划分为四个相等的部分，为用户提供清晰、均衡的显示效果。这种布局常用于创建网格系统，如卡片式展示、游戏界面或者控制面板等。 在Android中实现四等...
例如，当屏幕尺寸缩小至450px以下时，可以将各个`div`的宽度设置为100%，高度自动调整，以实现全宽度布局。 在处理响应式布局时，有时会遇到一些问题，比如在本例中提到的底部导航位置异常。这通常是因为内容的浮动...
8. **浮动与清除**：在早期的Div+CSS布局中，浮动（float）常用于创建多列布局，但可能导致父元素高度塌陷的问题。因此，理解和使用clear属性来清除浮动是必要的。 9. **响应式设计**：随着移动设备的普及，响应式...
这个“div+css布局大全”资源包很可能是包含了一系列教程、实例和指南，帮助初学者理解并掌握网页布局的核心技巧。通过学习，你可以从零开始构建整洁、高效的网页布局，提升网页设计的专业技能。
在这个"Android 百分比布局案例源码"中，包含了一个支持库和一个demo工程，为开发者提供了深入理解和实际运用百分比布局的实例。 1. **百分比布局介绍** - **PercentSupportLibrary**：这是Google提供的Android...
三、实例应用：登录界面 登录界面通常包含用户名输入框、密码输入框、登录按钮等元素。在本示例中，这些元素可能使用线性布局进行排列： 1. 垂直线性布局：首先，创建一个垂直的线性布局，包含用户名输入框和密码...