最近刚刚面试 ，面试题中有个左边定宽，右边自适应两列布局，我写完了面试官问我，这样可以吗？我说应该可以吧，其实我也不知道，回来后敲代码，验证，果然，我答错了，然后通过我的不懈努力，终于，你懂的。。。下面我把代码附上
这道题，看起来很简单，其实不然，小弟不才，想出了三种方法可以实现
第一：采用浮动元素，当然也得清浮动喽，左边浮动，右边用margin-left,，看淡word-break:break-all了没，是强制让内容换行，要不就跑远了。。。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>左侧定宽，右侧自适应(1)</title> <style type="text/css"> *{margin: 0;padding: 0;} div.contain{overflow: auto;zoom:1; background: yellow;} div.left{float: left;width: 200px;height: 400px;background: red; word-break: break-all;} div.right{margin-left:200px; height: 400px; background: blue; word-break: break-all;} </style> </head> <body> <div class="contain"> <div class="left"><p>2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p> </div> <div class="right"> 11111111111111111111111111111111 11111111111111111111111111111111 11111111111111111111111111111111 11111111111111111111111111111111 </div> </div> 123 </body> </html>
第二种：用相对定位,左边用position：absolute，右边用margin-left,其实跟浮动定位差不多，不过我也贴出来
<!doctype html> <head> <meta charset="utf-8"> <title>左侧定宽，右侧自适应(2)</title> <style type="text/css"> *{margin: 0;padding: 0;} div.contain{overflow: auto;zoom:1; background: yellow; position: relative;} div.left{ position: absolute; left: 0;top: 0; width: 200px;height: 400px;background: red; word-break: break-all;} div.right{margin-left:200px; height: 400px; background: blue; word-break: break-all;} </style> </head> <body> <div class="contain"> <div class="left"><p>2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p> </div> <div class="right"> 11111111111111111111111111111111 11111111111111111111111111111111 11111111111111111111111111111111 11111111111111111111111111111111 </div> </div> 123 </body> </html>
第三种：左边和右边都用相对定位
<!doctype html> <html> <head> <meta charset="utf-8"> <title>左侧定宽，右侧自适应(3)</title> <style type="text/css"> *{margin: 0;padding: 0;} div.contain{background: yellow; position: relative; height: 400px;} div.left{ position: absolute; left: 0;top: 0; width: 200px;height: 400px;background: red; word-break: break-all;} div.right{position: absolute; left: 200px;top: 0; height: 400px; background: blue; word-break: break-all;} </style> </head> <body> <div class="contain"> <div class="left"><p>2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p> </div> <div class="right"> 11111111111111111111111111111111 11111111111111111111111111111111 11111111111111111111111111111111 11111111111111111111111111111111 </div> </div> 123 </body> </html>
最后，如果有更好更多的方法，愿您能告诉我一声。。。