CSS fill remaining width

后端 未结 7 1131
天命终不由人
天命终不由人 2020-11-27 05:32

I have this header bar.

7条回答
  •  北荒
    北荒 (楼主)
    2020-11-27 06:09

    Use calc!

    https://jsbin.com/wehixalome/edit?html,css,output

    HTML:

    100 px wide!
    Fills width!

    CSS:

    .left {
      display: inline-block;
      width: 100px;
    
      background: red;
      color: white;
    }
    .right {
      display: inline-block;
      width: calc(100% - 100px);
    
      background: blue;
      color: white;
    }
    

    Update: As an alternative to not having a space between the divs you can set font-size: 0 on the outer element.

提交回复
热议问题