<style>
.left, .right{
height: 100px;
text-align: center;
}
.left{
200px;
background: red;
}
.right{
background: gray;
}
/* 方法一 */
/* .main{
100%;
float: left;
}
.main .right{
margin-left: 200px;
}
.left{
float: left;
margin-left: -100%;
} */
/* 方法二 */
/* .box{
display: flex;
}
.right{
flex: 1;
} */
/* 方法三 */
/* .box{
display: table;
}
.right{
display: table-cell;
100%;
} */
/* 方法四 */
/* .left{
float: left;
}
.right{
overflow: hidden;
} */
/* 方法五 */
.left{
position: absolute;
left: 0;
}
.right{
position: absolute;
left: 200px;
right: 0;
}
/* 方法六 */
/* calc */
</style>
</head>
<body>
<!-- 方法一 -->
<!-- <div class="main">
<div class="right">hhhhhhhhhhhhh</div>
</div>
<div class="left">
hehhehhe
</div> -->
<!-- 方法二、三、四、五、六 -->
<div class="box">
<div class="left">hehhehhe</div>
<div class="right">hhhhhhhhhhhhh</div>
</div>
</body>