實現左邊div固定寬度，右邊div自適應

標籤：

（1）使用float

<div class="use-float">    <div></div> <div></div></div>

.use-float>div:first-child{ width:100px; float:left;}.use-float>div:last-child{ overflow:hidden;}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

（2）使用table

<table class="use-table">    <tr> <td></td> <td></td> </tr> </table>

.use-table{    border-collapse:collapse; width:100%;}.use-table>tbody>tr>td:first-child{ width:100px;}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

（3）用div類比table

<div class="use-mock-table">    <div></div> <div></div></div>

.use-mock-table{    display:table; width:100%;}.use-mock-table>div{ display:table-cell;}.use-mock-table>div:first-child{ width:100px;}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

（4）使用flex

<div class="use-flex">    <div></div> <div></div></div>

.use-flex{    display:flex;}.use-flex>div:first-child{ flex:none; width:100px;}.use-flex>div:last-child{ flex:1;}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

：（在以上樣式基礎上，我又加了高度和邊框，才能看到下面的樣子。。。）

實現左邊div固定寬度，右邊div自適應