230问答网 > css能不能实现左边div固定宽度，右边div自适应撑满剩下的宽度

css能不能实现左边div固定宽度，右边div自适应撑满剩下的宽度

2025-01-03 18:15:28

推荐回答（3个）

回答1：

可以实现，

/*利用bfc*/
.box{
   height: 200px;
   background: red;
}
.left{
   width: 100px;
   height: 150px;
   background: blue;
   float: left;
}
.right{
   height: 150px;
   overflow: hidden;
   background: orange;
}
/*定位*/
.box{
    height: 200px;
    background: red;
    position: relative;
}
.left{
    width: 100px;
    height: 150px;
    background: blue;
}
.right{
    height: 150px;
    background: orange;
    position: absolute;
    right: 0;
    top: 0;
    left: 100;
 }

/*不考虑兼容的话，弹性盒*/
.box{
  width: 100%;
  height: 200px;
  background: red;
  display: flex;
}
.left{
  width: 100px;
  height: 150px;
  background: blue;
}
.right{
  flex:1;
  height: 150px;
  background: orange;
}

回答2：

    .content{
    width:1000px;
    height:500px;
  }
  .left{
    float:left;
    width:300px;
    height:100%;
    background:green;
  }
  .right{
    width:100%;
    height:100%;
    margin-left:300px;
    background:red;
  }

左边div左浮动，宽度300；右边div用margin-left挤到右边，宽度设为100%

效果图：

回答3：

可以的，比如dom结构如下，

.div1 {
width: 200px;
height: 300px;
display: inline-block;
}
.div2 {
width: calc(100% - 200px);
height: 300px;
display: inline-block;
}

这样就可以达到题中所述的效果了。