(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;}
css实现左边div固定宽度,右边div自适应撑满剩下的宽度
原文地址:http://www.cnblogs.com/watermelonban/p/7668197.html