做者:何幻 连接: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; }