开发者社区> 技术小阿哥> 正文

2014最新全浏览器兼容左列固定右列自适应宽度技巧大公开

2017-11-27 695

简介：
+关注继续查看

做前端的人肯定会遇到经典的左列固定，右列自适应宽度的样式效果。这种想起来很简单做起来很麻烦的事情今天你有好方案了。


--不要信那些什么左侧写固定宽度，右侧不用写宽度属性和浮动属性，浏览器自动就实现右列自适应的话。亲自试过了，没用 谁愿意可以也试试——谁试谁知道^&^


--更不要为了在css中实现右列自动获取宽度值而使用“expression()”，不想吐槽后期谁维护谁知道——造孽呀！


正文来了：最新的组合实现左列固定宽度右列宽度自适应方案如下


1
2
3
4
5
6
7
8
.left{
????width:546px;
????height:91px;
}
.right{
????width:100%;
????height:91px;
}

重点看下面的div结构

1
2
3
<div class="right">
????<div class="left"></div>
</div>

仔细对比你就会发现，只需要让left层放到right层里面就OK了



本文转自 沫沫金 51CTO博客，原文链接：http://blog.51cto.com/zl0828/1371923，如需转载请自行联系原作者

版权声明：本文内容由便宜云服务器实名注册用户自发贡献，版权归原作者所有，便宜云服务器开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《便宜云服务器开发者社区用户服务协议》和《便宜云服务器开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

前端开发
开发者社区 > 开发与运维 > 文章
云迁移中心
作者高分内容
更多
分布式监控系统ganglia的详细配置 3402 SQL Server-聚焦UNIOL ALL/UNION查询 3241 多列索引生效规则 3300 cobbler------安装配置 3007 PowerShell远程管理Windows Server(1):域环境 3911
相关文章
SouthernWind
让css固定定位占据其位置
让css固定定位占据其位置
45 0
HoMeTown
【CSS】聊一聊CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别
前言 大家好，我是HoMeTown，顺着计量单位，想继续聊一下CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别。
64 0
萌狼蓝天
【前端】CSS实现图片文字对齐 并随着设备尺寸改变而改变大小
【前端】CSS实现图片文字对齐 并随着设备尺寸改变而改变大小
92 0
前端歌谣
前端项目实战112-设置宽度按照内容自适应设置宽度
前端项目实战112-设置宽度按照内容自适应设置宽度
31 0
chenchuan
css控制超出宽度 ...展示
css控制超出宽度 ...展示
97 0
3oixkwas4wki6
百度地图元素宽度自适应的方法
百度地图元素宽度自适应的方法
139 0
闫硕鹏
网页自适应跟随系统深色模式
近几年，各个主流操作系统都逐渐开端注重深色方式，从而改善用户在环境光亮低时的阅读体验。随着水果在 iOS 13 与 macOS Mojave 中添加了深色方式，除了 Linux 以外一切的主流操作系统都曾经完成了系统层级的深色方式。Linux 由于 DE、WM 的种类繁杂暂时没有统一的标准，但目前可以经过深色 GTK+ 主题、阅读器插件等方式完成“伪全局”深色方式。既然有了系统层级的适配，阅读器就可以读取深色方式开关，从而完成网页的自顺应。这就是新标准 prefers-color-scheme。
673 0
便宜云服务器小秘
网页宽度一般设置多少才合适？
许多的网页设计在进行网页布局设计时,进行界面网页的宽度尺寸设计都比较迷茫,800600尺寸及1024768尺寸的分辨率下,网页应该设计为多少像素才合适呢?太宽就会出现水平滚动条了,下面我们就网页设计的标准尺寸进行讲解.网页设计标准尺寸: 便宜云服务器代金券1000元免费领取地址：https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=2a7uv47d 新老便宜云服务器账户均可领取！可用于购买便宜云服务器服务器ECS、云数据库RDS、虚拟主机、安骑士、DDoS高防IP等100多云计算产品。
3487 0
行者武松
真的，移动端尺寸自适应与dpr无关
4348 0
唐玄奘
精确地计算Web页面中滚动条的宽度
1019 0
+关注
技术小阿哥
文章
问答
视频
作者高分内容
更多
分布式监控系统ganglia的详细配置 3402 SQL Server-聚焦UNIOL ALL/UNION查询 3241 多列索引生效规则 3300 cobbler------安装配置 3007 PowerShell远程管理Windows Server(1):域环境 3911
文章排行榜
最热
最新
1 MIPS架构深入理解9-向MIPS移植软件之Cache管理 40662
2 C++ STL容器和算法：详解和实例演示 39521
3 Go 方法接收器：选择值接收器还是指针接收器？ 38132
4 代码的简单设计五原则 31119
5 使用篇丨链路追踪（Tracing）很简单：链路拓扑 30606
6 如何提高光伏发电效能异常检出效率的实践案例 28284
7 java 泛型 万字详解（通俗易懂) 28144
8 日志服务 SLS 和开源 ELK 全面对比 28059
9 数据一致性比对（番外） 27414
10 便宜云服务器检索分析服务Elasticsearch版内核持续优化 25293
11 【分布式技术专题】「分布式技术架构」手把手教你如何开发一个属于自己的限流器RateLimiter功能服务 21707
12 高性能的本地缓存方案选型，看这篇就够了！ 21548
13 PolarDB-X 致数据库行内人 (一) ~ 如何有效评测国产数据库的分布式事务 15317
14 实践教程之体验PolarDB-X分布式事务和数据分区 10367
15 Python3，自从掌握了这个方法，再也不用print进行调试了。 14618
16 现场直击：2023便宜云服务器峰会精彩发布抢先看（内含福利） 335140
17 如何解决IoT数据入仓的客户实践 8636
18 大数据&AI产品月刊【2023年4月】 5418
19 ClickHouse创始人：融合数据库该“卷”的还是性能和速度 55367
20 便宜云服务器联合埃森哲正式发布《跨国企业上云登陆区（Landing Zone）白皮书》 50777
1 AIGC创作家 152
2 当MySQL想恋爱，java和navicate抢着做媒婆 ------ java连接MySQL数据库 & navicat for MySQL 连接 90
3 亿视电子基于PolarDB-X打造能源数字基座实践 67
4 全面升级，重磅上线！容器服务ASK评测携大奖前来！ 60
5 便宜云服务器丁宇：云上开发成为主流，Serverless 定义新范式 67
6 便宜云服务器AI新品“通义听悟”，开放公测！ 1569
7 LeetCode算法小抄--二叉搜索树 125
8 小米基于 Flink 的实时数仓建设实践 146
9 便宜云服务器OpenSearch重磅推出LLM问答式搜索产品，助力企业高效构建对话式搜索服务 715
10 便宜云服务器“通义听悟”正式公测：用户可免费领100小时转写服务 7346
11 Bean异步初始化，让你的应用启动飞起来 5968
12 图解LeetCode——98. 验证二叉搜索树 11032
13 图解LeetCode——108. 将有序数组转换为二叉搜索树 100
14 Windows上的实用CMD命令 10890
15 关于编辑Windows的右键【新建】删除和添加 11171
16 SpringMVC总结_从RESTful到拦截器 10894
17 进阶篇丨链路追踪（Tracing）很简单：链路成本指南 6105
18 一口气整理三种不同运营商要素验证API的Java 接入代码 81
19 python异常处理 10701
20 Git分支教程：详解分支创建、合并、删除等操作 10942
推荐文章
现场直击：2023便宜云服务器峰会精彩发布抢先看 AIGC主题征文开启，参与赢取富士拍立得 乘风伯乐招募令，邀请伯乐获取多重好礼！ 乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多
低代码开发师（初级）实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期：MySQL数据库进阶实战
立即下载
相关实验场景
更多
基于参数关联关系动态呈现参数
19
1.0小时
去实验


http://www.vxiaotou.com