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}
