布局（二）一列固定一列自适应

1.png

布局实现方式
1）flex

html:

      
固定宽度200px
      
自适应填充剩余宽度

css:
.box{display:flex;width:500px;}
.box1,.box2{height:100px;border:1px solid black;line-height:100px}
.box1{width:200px;}
.box1{flex:1}

2)calc

html:

      
固定宽度200px
      
自适应填充剩余宽度

css:
.box{width:500px;}
.box1,.box2{float:left;height:100px;border:1px solid black;line-height:100px}
.box1{width:200px;}
.box1{width:calc(100% - 200px - 4px)}

3)table+outline(不占空间)

html:

      

            
固定宽度200px
            
自适应填充剩余宽度
      

css:
table{width:500px;border-spacing:0;}
th{height:100px;outline:1px solid black;padding:0}
th:nth-type-of(1){width:200px}

4)table+border(占空间)

html:

      

            
固定宽度200px
            
自适应填充剩余宽度
      

css:
table{width:500px;border-spacing:0;}
th{height:100px;border:1px solid black;padding:0}
th:nth-type-of(1){width:200px}