最近在面試，遇到了個(gè)面試題，就是說(shuō)實(shí)現(xiàn)個(gè)左右布局的界面，左側(cè)div固定，右側(cè)div自適應(yīng)，我第一反應(yīng)就是flex就可以解決，但是面試官說(shuō)不行，兼容IE8怎么辦，我當(dāng)時(shí)心里就......（啥年代了還要兼容），當(dāng)時(shí)我沒答上來(lái)，所以面試完我就想了下其他方案，也看了些css方面的，用了6種方法實(shí)現(xiàn)了一下，不過(guò)我還是要說(shuō)，flex真香，兼容的問(wèn)題，我覺得算了吧，我兼容不動(dòng)。下面就是實(shí)現(xiàn)的代碼，有需要的小伙伴可以參考一下，我主要就是記錄一下：
<!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>左側(cè)固定，右側(cè)自適應(yīng)</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
代碼寫的不對(duì)的地方歡迎大家留言指正，這個(gè)就是前幾天遇到的面試題，后面我會(huì)持續(xù)更新前端相關(guān)的東西，夯實(shí)基礎(chǔ)，最近面試得出的結(jié)論就是，主要是面試官的評(píng)論：應(yīng)用層面的東西基本很熟，寫項(xiàng)目沒問(wèn)題，但是前端基礎(chǔ)不太扎實(shí)。所以我要踏踏實(shí)實(shí)打好基礎(chǔ)，爭(zhēng)取找個(gè)不錯(cuò)的工作！卷起來(lái)吧，小伙伴們......
