分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

css实现左边div固定宽度,右边div自适应撑满剩下的宽度

发布时间:2023-09-06 01:17责任编辑:白小东关键词: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;}

css实现左边div固定宽度,右边div自适应撑满剩下的宽度

原文地址:http://www.cnblogs.com/watermelonban/p/7668197.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved