三栏布局：左右固定中间自适应
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
1.position: absolute方式
*{
margin: 0;
padding: 0;
}
.left,.right{
position: absolute;
top: 0;
border: 1px solid black;
width: 300px;
min-height: 500px;
}
.left{
left: 0;
}
.right{
right: 0;
}
.main{
margin: 0 300px;
background-color:red;
border: 1px solid green;
min-height: 500px;
}
2.float: left方式
*{
margin: 0;
padding: 0;
}
.left,.right{
float: left;
width: 300px;
background-color: red;
border: 1px solid black;
height: 500px;
}
.right{
overflow: auto;
float: right;
}
.main{
margin: 0 300px;
background-color: hotpink;
height: 500px;
border: 1px solid black;
}
3.display: flex方式
.content{
display: flex;
}
.aside.left{
order: 1;
border: 1px solid black;
width: 200px;
}
.aside.right{
order: 3;
border: 1px solid black;
width: 200px;
}
.aside.main{
order: 2;
flex-grow: 1;
border: 1px solid red;
}
.aside{
height: auto;
}
<div class="content">
<div class="left aside">left</div>
<div class="right aside">right</div>
<div class="main aside">main</div>
</div>
————学习记录
