右边宽度固定，左边自适应
第一种：用flex
<style>
body{
display: flex;
}
.left{
background-color: rebeccapurple;
height: 200px;
flex: 1;
}
.right{
background-color: red;
height: 200px;
width: 100px;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
第二种：用margin-right
<style>
div {
height: 200px;
}
.left {
float: right;
width: 200px;
background-color: rebeccapurple;
}
.right {
margin-right: 200px;
background-color: red;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
当然还有第三种的, 就是使用定位
<style>
div {
height: 200px;
width:100%;
position: relative;
}
.left {
width: 200px;
background-color: rebeccapurple;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.right {
width:100%;
padding-left: 200px;
background-color: red;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
版权声明：本文为LuviaWu原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。