最近在面試俄认,遇到了個(gè)面試題个少,就是說實(shí)現(xiàn)個(gè)左右布局的界面,左側(cè)div
固定眯杏,右側(cè)div
自適應(yīng)夜焦,我第一反應(yīng)就是flex就可以解決,但是面試官說不行岂贩,兼容IE8
怎么辦糊探,我當(dāng)時(shí)心里就......(啥年代了還要兼容),當(dāng)時(shí)我沒答上來河闰,所以面試完我就想了下其他方案科平,也看了些css方面的,用了6種方法實(shí)現(xiàn)了一下姜性,不過我還是要說瞪慧,flex
真香,兼容的問題部念,我覺得算了吧弃酌,我兼容不動(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)目沒問題鬼佣,但是前端基礎(chǔ)不太扎實(shí)驶拱。所以我要踏踏實(shí)實(shí)打好基礎(chǔ),爭(zhēng)取找個(gè)不錯(cuò)的工作晶衷!卷起來吧蓝纲,小伙伴們......