html

<div class='demo'>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

公用css:

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。 
 .left {
        width: 200px;
        background-color: red;
    }

    .right {
        width: 100%;
        height: 200px;
        background-color: blue;
    }

1 利用css3   flex

css：

 .demo{
        display: flex;
    }
    .demo .right{
        flex:1;
    }

2 左边浮动

.demo{
        overflow: hidden;
        
    }
    .demo .left{
        float: left;
    }

3 左右都浮动 使用calc计算右边的宽度

.demo{
        overflow: hidden;
    }
    .demo .left{
        float: left;
    }
    .demo .right{
      float: left;
      width: calc(100% - 200px);
    }

  使用css3 flex，还可以实现，左边的高度随右边的高度而变化；

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄