网页布局实例：一道搜狐的WEB前端工程师面试题
本人是一名WEB前端的培训讲师，由于长期从事理论方面的研究和授课，以下是一个知名网络公司WEB前端工程师的其中一道面试题：
完成以下布局：
1. 三列布局， 自适应整个屏幕；
2. 其中左右固定宽度，中列自适应其余宽度；
3. 无论三列内容多少，三列高度等高；
下边是解决代码 在蓝色理想上看的一个帖子 做了一点点变更
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>三列布局， 自适应整个屏幕</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-family:"微软雅黑";
font-size:13px;
padding:0 10px;
overflow:hidden;
}
html, body, .left, .right, .center, .wrap {
height:100%;
}
.wrap a {
color:#333;
text-decoration:none;
}
ul {
list-style:none;
padding:0 0 0 25px;
}
.left {
width:240px;
background:#787878;
float:left;
}
.left h3, .right h3, .center h3 {
line-height:35px;
font-size:13px;
padding-left:10px;
}
.right {
width:240px;
background:#666;
float:right;
}
.center {
background:#999;
_float:left;/*ie6 hack*/
overflow:hidden;
}
</style>
<title>两列定宽中间自适应结构</title>
</head>
<body>
<div>
<div>
<h3>左侧边栏</h3>
<ul>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
</ul>
</div>
<div>
<h3>右侧边栏</h3>
<ul>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
</ul>
</div>
<div>
<h3>中间边栏</h3>
<ul>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
<li><a href="#">www.5myworld.com</a></li>
</ul>
<span style="float:right; position:relative;"> </span>
<!--for ie6-->
</div>
</div>
</body>
</html>
三栏登高，其解决方法可以采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现。
浙公网安备 33010602011771号