左侧div固定宽度，右侧自适应
2022-05-18 本文已影响0人
oh_flying
最近在面试，遇到了个面试题，就是说实现个左右布局的界面，左侧div固定，右侧div自适应，我第一反应就是flex就可以解决，但是面试官说不行，兼容IE8怎么办，我当时心里就......（啥年代了还要兼容），当时我没答上来，所以面试完我就想了下其他方案，也看了些css方面的，用了6种方法实现了一下，不过我还是要说，flex真香，兼容的问题，我觉得算了吧，我兼容不动。下面就是实现的代码，有需要的小伙伴可以参考一下，我主要就是记录一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左侧固定，右侧自适应</title>
<style>
.one {
width: 100%;
display: flex;
margin-bottom: 20px;
height: 100px;
}
.one .left1 {
background-color: green;
width: 100px;
height: 100%;
}
.one .right1 {
flex: 1;
height: 100%;
background-color: orange;
}
.two {
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
margin-bottom: 20px;
}
.two .left2 {
width: 100px;
height: 100%;
background-color: green;
}
.two .right2 {
width: calc(100% - 100px);
height: 100%;
background-color: orange;
}
.three {
width: 100%;
height: 100px;
margin-bottom: 20px;
}
.three .left3 {
width: 100px;
height: 100%;
float: left;
background-color: green;
}
.three .right3 {
background-color: orange;
margin-left: 100px;
height: 100%;
}
.four {
width: 100%;
height: 100px;
margin-bottom: 20px;
}
.four .left4 {
background-color: green;
float: left;
width: 100px;
height: 100%;
}
.four .right4 {
overflow: hidden;
height: 100%;
background-color: orange;
}
.five {
width: 100%;
position: relative;
height: 100px;
margin-bottom: 20px;
}
.five .left5 {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100%;
background-color: green;
}
.five .right5 {
margin-left:100px;
height: 100%;
background-color: orange;
}
.six {
position: relative;
width: 100%;
height: 100px;
margin-bottom: 20px;
overflow: hidden;
}
.six .left6 {
position: absolute;
left: 0;
top: 0;
background-color: green;
width: 100px;
height: 100%;
}
.six .right6 {
position: absolute;
left: 100px;
top: 0;
width: 100%;
height: 100%;
background-color: orange;
}
</style>
</head>
<body>
<div class="one">
<div class="left1"></div>
<div class="right1"></div>
</div>
<div class="two">
<div class="left2"></div>
<div class="right2"></div>
</div>
<div class="three">
<div class="left3"></div>
<div class="right3"></div>
</div>
<div class="four">
<div class="left4"></div>
<div class="right4"></div>
</div>
<div class="five">
<div class="left5"></div>
<div class="right5"></div>
</div>
<div class="six">
<div class="left6"></div>
<div class="right6"></div>
</div>
</body>
</html>
效果图就是下面这样子：
截屏2022-05-18 22.33.15 (2).png
代码写的不对的地方欢迎大家留言指正，这个就是前几天遇到的面试题，后面我会持续更新前端相关的东西，夯实基础，最近面试得出的结论就是，主要是面试官的评论：应用层面的东西基本很熟，写项目没问题，但是前端基础不太扎实。所以我要踏踏实实打好基础，争取找个不错的工作！卷起来吧，小伙伴们......
