1.浮动 将左边固定区域设置浮动，右边margin设置为左边固定div的宽度 html代码 <div class="left"></div> <div class="right"></div> css代码 .left{ width:200px; float:left; background:red; height:100px;} .right{ background:#000000; height:100px; margin-left:200px; } 2..绝对定位（absolute） 将左边固定区域设置相对定位，右边margin设置为左边固定div的宽度 html代码 <body> <div class="main"> <div class="left"></div> <div class="right"></div> </div> </body> css代码 .main{ width:100% ;height:100% ;position: relative;} .left{width:200px; position:absolute ;background:red; height:100px;} .right{background:#000000 ;height:100px; margin-left:200px;} 3.flex弹性布局 html代码 <body> <div class="main"> <div class="left"></div> <div class="right"></div> </div> </body> CSS代码
.main {
display: flex;
}
.left {
width: 200px;
height: 100px;
background-color: green;
}
.right {
flex: 1;
background-color: red;
}