这是我在一家公司面试时遇到的问题，当时没有答上来！！
所以看到的小伙伴一定要注意了！！
变化浏览器宽度可看到效果：
左
右
中
然后我们来看看代码：
第一种方法：（浮动）
style type=text/css> .left,.right,.center{ border:1px solid; height:100px; text-align: center; line-height:100px; font-size:50px; } .left{ float:left; width:100px; } .right{ float:right; width:100px; } .center{ margin:0 100px; }style>div> div class=left>左div> div class=right>右div> div class=center>中div>div>
第二种方法：（绝对定位）
style type=text/css> .container{ position: relative; } .left,.right,.center{ position:absolute;/*增加绝对定位*/ top:0; border:1px solid; height:100px; text-align: center; line-height:100px; font-size:50px; } .left{ left:0; width:100px; } .right{ right:0; width:100px; } .center{ width:auto; left:100px; right:100px; }style>div class=container> div class=left>左div> div class=right>右div> div class=center>中div>div>
刚发布不久，就有个小伙伴在下面评论了第三种方法
第三种方法：（fiex）
浏览器支持
目前主流浏览器不支持 box-flex 属性。
internet explorer 10 通过私有属性 the -ms-flex 支持.
firefox通过私有属性 -moz-box-flex 支持.
safari和chrome通过私有属性 -webkit-box-flex 支持.
注意： internet explorer 9及更早ie版本不支持弹性框.
style type=text/css> .container{ display:-moz-box; /* firefox */ display:-webkit-box; /* safari and chrome */ display:box; } .left,.right,.center{ border:1px solid; height:100px; text-align: center; line-height:100px; font-size:50px; } .left{ width:100px; } .right{ width:100px; } .center{ -moz-box-flex:1.0; /* firefox */ -webkit-box-flex:1.0; /* safari 和 chrome */ box-flex:1.0; }style>div class=container> div class=left>左div> div class=center>中div> div class=right>右div>div>
当然还有很多方法，如果你有什么更好的方法，希望你能在下面评论出来，我们大家一起学习