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

1.png

布局实现方式
1）flex

html:
<div class="box">
      <div class="box1">固定宽度200px</div>
      <div class="box2">自适应填充剩余宽度</div>
</div>
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:
<div class="box">
      <div class="box1">固定宽度200px</div>
      <div class="box2">自适应填充剩余宽度</div>
</div>
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:
<table>
      <tr>
            <th class="box1">固定宽度200px</th>
            <th class="box2">自适应填充剩余宽度</th>
      </tr>
</table>
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:
<table>
      <tr>
            <th class="box1">固定宽度200px</th>
            <th class="box2">自适应填充剩余宽度</th>
      </tr>
</table>
css:
table{width:500px;border-spacing:0;}
th{height:100px;border:1px solid black;padding:0}
th:nth-type-of(1){width:200px}