console
<section class="wrapper">
<div class="left">left content</div>
<div class="right">right content</div>
</section>
/* 1、float布局 */
/* .left{
float: left;
width: 100px;
background: red;
}
.right{
background: yellow;
margin-left: 100px; 或者 overflow: hidden;
} */
/* 2、position "子绝父相" */
/* .wrapper{
position: relative
}
.left{
width: 100px;
background: red;
}
.right{
position: absolute;
background: yellow;
top: 0;
right: 0;
left: 100px;
} */
/* 3、Flex */
/* .wrapper{
display: flex;
}
.left{
width: 100px;
background: red;
}
.right{
flex: 1;
background: yellow;
} */
/* 4、table */
/* .wrapper{
display: table;
width: 100%;
}
.left{
display: table-cell;
width: 100px;
background: red;
}
.right{
display: table-cell;
background: yellow;
} */
/* 5、gird */
/* .wrapper{
width: 100%;
display: grid;
grid-template-columns:100px auto 设置每列的宽度，左 100px 右 自适应
}
.left{
background: red;
}
.right{
background: yellow;
} */