实现左侧固定，右侧自适应两栏布局
<div class="parent">
<div class="left">左边内容</div>
<div class="right">右边内容</div>
</div>
左侧绝对定位 加 右侧 margin-left
.parent {
position: relative;
}
.left {
background: red;
width: 100px;
height: 100px;
position: absolute;
left: 0;
}
.right {
background: blue;
margin-left: 100px;
height: 100px;
}
左侧浮动，右侧 margin-left
.left {
background: red;
width: 100px;
height: 100px;
float: left;
}
.right {
background: blue;
height: 100px;
overflow: hidden;
}
左测浮动，右侧 overflow
跟方法 2 类似，只是将右侧 overflow 改为 margin-left
.left {
background: red;
width: 100px;
height: 100px;
float: left;
}
.right {
background: blue;
height: 100px;
margin-left: 100px;
}
左右两边 absolute
.parent {
position: relative;
}
.left {
background: red;
position: absolute;
width: 100px;
height: 100px;
left: 0;
}
.right {
background: blue;
position: absolute;
height: 100px;
left: 100px;
right: 0;
}
flex
利用 css3 的 flex 属性： 一个父元素包裹两个子元素，父元素设置 display: flex，左边设置固定宽度，右边设置 flex:1，自动填充满剩余空间
.parent {
display: flex;
}
.left {
background: red;
width: 100px;
height: 100px;
}
.right {
background: blue;
height: 100px;
flex: 1;
}
grid
利用 css3 的 grid 属性：
.wrap {
display: grid;
grid-template-columns: 10px auto;
}