在大厂面试的时候遇到的一个场景题,熟悉的是三栏布局,但是要在这个基础上加个左边栏吸顶效果,网上搜答案搜不到,只能自己写了…如果大家有更好的方法欢迎交流留言啊。
题目:实现一个三栏布局,左边宽度50px,右边宽度100px,中间自适应。左边模块要有吸顶效果。
我选取的方法其实就是给左边栏设置position:fixed;top:0;但是会出现中间部分往左偏移的问题,于是我就给它设置一个左边距margin-left:50px;需求是实现了,但总感觉不是最优解。
代码效果如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实现效果</title>
</head>
<body>
<div class="contain">
<div class="left">
左边
</div>
<div class="right">
右边
</div>
<div class="middle">
中间
</div>
</div>
</body>
<style>
/* 利用浮动 */
*{
margin: 0;
padding: 0;
}
.contain{
height: 1500px;
}
.left{
background-color: aqua;
position: fixed;
top: 0;
float: left;
width: 50px;
height: 100%;
}
.right{
background-color:blue;
float: right;
width: 100px;
height: 100%;
}
.middle{
background-color:red;
margin-left: 50px;
height: 100%;
}
</style>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实现效果</title>
</head>
<body>
<div class="contain">
<div class="left">
左边
</div>
<div class="middle">
中间
</div>
<div class="right">
右边
</div>
</div>
</body>
<style>
/* 利用弹性盒子布局 */
*{
margin: 0;
padding: 0;
}
.contain{
height: 1500px;
display: flex;
}
.left{
background-color: aqua;
/* position: fixed; */
top: 0;
position:fixed;
width: 50px;
height: 100%;
}
.right{
background-color:blue;
width: 100px;
}
.middle{
background-color:red;
flex: 1;
margin-left: 50px;
}
</style>
</html>
技术有限,还想看看大佬们有没有更优解。