左右2栏布局最常⻅的就是后台管理系统:⼀般左侧宽度固定,右侧宽度⾃适应
双⻜翼布局:左右2侧宽度固定,中间⾃适应。
不⽤BFC的实现步骤:核⼼思想⽤(左侧padding挤开)
1. 创建左右2个div
2. 左侧宽⾼先固定
3. 右侧宽度不写,⾼度⾃定义。
4. 左侧float:left
5. 给right创建⼀个⼦盒⼦,让⼦盒⼦⾼度100%。
6. 让右侧盒⼦padding-left:左侧的宽度的距离
1.触发BFC区域来实现
<style>
.left {
height: 100px;
width: 100px;
background-color: aqua;
float: left;
}
.right {
height: 100px;
width: 100px;
background-color: brown;
float: right;
}
.center {
height: 500px;
background-color: rgb(29, 22, 104);
overflow: hidden;
}
</style>
<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</body>
2.用弹性盒子写
<!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>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
body{
display: flex;
}
.left,.right{
width: 200px;
height: 100%;
background-color: aqua;
}
.center{
flex: 1;
height: 100%;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</body>
</html>