css实现左边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; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步