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

时间: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>

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