标签：
作为一个前端小白，这是我面试前端职位的题目之一，没有实践经验，误打误撞，最后还是错了！
今天难得有时间，认真思考了一下。答案不一定最佳的解决方案，但是能实现同等效果。
问题描述：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为200px，中间那个DIV充满剩余的宽度。
这个题目是我当时做的第一个题目，看完题目就把答案写出来了：不就是一个float:left;的事情吗！（实践出真知，被事实赤裸裸的打败了！）
我笔试提交的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
.mainwrap{
width: 1000px;
margin: 0 auto;
height: 300px;
}
.left{
width: 150px;
height: 100%;
background: yellow;
float: left;
}
.right{
width: 150px;
height: 100%;
background: pink;
float: left;
}
.center{
width: auto;
height: 100%;
background: green;
float: left;
}
</style>
</head>
<body>
<div class="mainwrap">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
面试官的评价：这个代码是得不到你的目标效果的。
当时他没继续追究转移了问题，后来我在电脑上尝试运行了一下代码，结果如下：
center不见了！
确实不是目标效果！顿时不知道发生了什么事！但是我明白了面试官的评价：这个代码是得不到你的目标效果的（你对HTML+CSS还不够深入）！
但是还很庆幸题目这么简单，看到这个结果才发现自己掉进面试官设计的坑都不知道！
面试都过去快5个月了，在项目中遇到类似的问题都只能把中间的div作为固定div处理，一直没认真地寻找过这个问题的解决方案。总是以小白为借口，真的错了解决很多经典问题的机会。回到正题，今天认真思考了一下，这不一定是一个最佳的解决方案，但是可以达到目标效果，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
.mainwrap{
width: 1000px;
margin: 0 auto;
height: 300px;
}
.left{
width: 150px;
height: 100%;
background: yellow;
float: left;
}
.right{
width: 150px;
height: 100%;
background: pink;
float: right;
position: relative;
top: -100%;
}
.center{
width: auto;
height: 100%;
background: green;
/*float: left;*/
}
</style>
</head>
<body>
<div class="mainwrap">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
有这个问题有一个延伸问题；相反的，中间的div固定，左右均分剩下的宽度。
其实能解决上面那个问题，这个问题就很开放了，实现方式有很多，比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
.mainwrap{
width: 1000px;
margin: 100px auto;
height: 300px;
border: 1px solid #ff0000;
}
.left{
width: 50%;
height: 100%;
background: yellow;
float: left;
}
.right{
width: 50%;
height: 100%;
background: pink;
float: right;
position: relative;
top: -100%;
}
.center{
width: 600px;
margin: 0 auto;
height: 100%;
background: green;
/*float: left;*/
position: relative;
z-index: 1000;
}
</style>
</head>
<body>
<div class="mainwrap">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
Done!
还有谁于更好的解决方案吗？求赐教！
版权声明：本文为博主原创文章，未经博主允许不得转载。
DIV_CSS布局问题：3个水平对齐布局的DIV，左右固定宽，中间宽度自动填充
标签：
原文地址：http://blog.csdn.net/github_22022001/article/details/47278349
