左边定宽，右边自适应两列布局

最近刚刚面试，面试题中有个左边定宽，右边自适应两列布局，我写完了面试官问我，这样可以吗？我说应该可以吧，其实我也不知道，回来后敲代码，验证，果然，我答错了，然后通过我的不懈努力，终于，你懂的。。。下面我把代码附上

这道题，看起来很简单，其实不然，小弟不才，想出了三种方法可以实现

第一：采用浮动元素，当然也得清浮动喽，左边浮动，右边用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&nbsp;&nbsp;&nbsp;11111111111111111111111111111111&nbsp;&nbsp;&nbsp;11111111111111111111111111111111&nbsp;&nbsp;&nbsp;11111111111111111111111111111111&nbsp;&nbsp;&nbsp;
    </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&nbsp;&nbsp;&nbsp;11111111111111111111111111111111&nbsp;&nbsp;&nbsp;11111111111111111111111111111111&nbsp;&nbsp;&nbsp;11111111111111111111111111111111&nbsp;&nbsp;&nbsp;
    </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&nbsp;&nbsp;&nbsp;11111111111111111111111111111111&nbsp;&nbsp;&nbsp;11111111111111111111111111111111&nbsp;&nbsp;&nbsp;11111111111111111111111111111111&nbsp;&nbsp;&nbsp;
    </div>
</div>
123
</body>
</html>

最后，如果有更好更多的方法，愿您能告诉我一声。。。

相关阅读:
mysql实现主从复制
 go get时候 timeout
linux 修改/etc/profile文件之后没有效果
 初试 laravel
php 实现单个大文件(视频)的断点上传
 UEditor图片左对齐右对齐要的作用显示之后保存之后没有效果
 docker 实现 mysql+nginx+php
redis
easyPoi框架的excel导入导出
 从生产计划的角度认识精益生产
原文地址：https://www.cnblogs.com/reaf/p/5782191.html