做者:何幻 連接:https://www.zhihu.com/question/37208845/answer/73496709 來源:知乎 著做權歸做者全部。商業轉載請聯繫做者得到受權,非商業轉載請註明出處。flex
//(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; }