1.两列左侧固定宽度,右侧自适应
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
1.float+margin
.left {
float:left;
width:100px;
height:100%;
}
.right {
height:100%;
margin-left:100px;
}
2.float+overflow
.left {
float:left;
width:100px;
background:red;
}
.right {
overflow:hidden;
background:yellow;
}
3.flex
.parent{
display: flex;
}
.left{
background: red;
width: 100px;
}
.right{
background: yellow;
flex-grow: 1;
}
2.三列左右固定,中间自适应
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
1.流式
.left{
float:left;
background:red;
width:100px;
height:100px;
}
.right{
float:right;
background:black;
width:100px;
height:100px;
}
.center{
background: yellow;
margin-left:100px;
margin-right: 100px;
height:100px;
}
2.BFC
.center{
background: yellow;
height:100px;
overflow: hidden;
}
3.Flex
.container{
width: 100%;
height:100px;
display: flex;
}
.left{
background:red;
width:100px;
}
.right{
background:black;
width:100px;
order:2;
}
.center{
background:yellow;
flex-grow:1;
order:1;
}
4.absolute
.container{
width: 100%;
position: relative;
}
.left{
background:red;
width:100px;
height:100px;
position:absolute;
left:0;
top:0;
}
.right{
background:black;
width:100px;
height:100px;
position:absolute;
right:0;
top:0;
}
.center{
background:yellow;
margin:0 100px;
height:100px;
}