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

时间：2022-01-25 20:25:14

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

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

第一：采用浮动元素，当然也得清浮动喽，左边浮动，右边用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>

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

标签：

相关文章