博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS float 定位和缩放问题
阅读量:6071 次
发布时间:2019-06-20

本文共 3136 字,大约阅读时间需要 10 分钟。

今天调试一个看起来很简单的前端问题,但却花了太多的时间,示例代码:

        
状态 标题 浏览量 发布时间  操作
已发布 田园里的蟋蟀 0 2016-03-17 15:26 修改 删除
已发布 田园里的蟋蟀 0 2016-03-17 15:26 修改 删除

效果:

435188-20160325163916761-1553481809.png

上面是我们一般设计后台使用的代码和样式,左边是菜单区域,右边是内容操作区域,但左边菜单区域因为分辨率或窗口大小进行了缩放,也就是菜单变形了,现在要求左边菜单固定宽度不拉伸,右边内容操作区域可以进行缩放,所以,我们改了下面的代码:

        
状态 标题 浏览量 发布时间  操作
已发布 田园里的蟋蟀 0 2016-03-17 15:26 修改 删除
已发布 田园里的蟋蟀 0 2016-03-17 15:26 修改 删除

效果:

435188-20160325220148511-1835881270.png

这个我花了很多时间进行调整,不是表格宽度超过内容区域,就是宽度不够,某个界面下调整了,但伸缩下界面,宽度又乱了,后来无意间调整了一下样式,就可以了,代码如下:

        
状态 标题 浏览量 发布时间  操作
已发布 田园里的蟋蟀 0 2016-03-17 15:26 修改 删除
已发布 田园里的蟋蟀 0 2016-03-17 15:26 修改 删除

主要改进是在右侧内容区域增加margin-left:144px样式,并且宽度要和菜单区域的宽度一致,缩放效果:

435188-20160325220751854-1305265272.png

你可能感兴趣的文章
MEF(Managed Extensibility Framework)有选择性地使用扩展组件
查看>>
在Brackets中使用Emmet
查看>>
VC 最爱问的问题:你这个创业项目,如果腾讯跟进了,而且几乎是产品上完全复制,你会怎么办?...
查看>>
SGU 303 Great Berland Wall(计算几何判环+最小割)
查看>>
3D游戏引擎剖析
查看>>
21. D3D-Sprite
查看>>
转载 关于使用typeid时要注意的问题
查看>>
JAVA的String 类
查看>>
cocos2d 的touch事件要点
查看>>
程序入口
查看>>
Spring MVC 3.0 RestTemplate
查看>>
ADO.NET访问数据集的表、行和列
查看>>
Flink - Working with State
查看>>
svn add xxx.txt 提示A (bin) xxx.txt
查看>>
数据库设计
查看>>
C语言 · 分数统计
查看>>
推断两条单链表是否相交
查看>>
Linux ftrace框架介绍及运用
查看>>
UVA 12295 Optimal Symmetric Paths
查看>>
【技术贴】tomcat启动失败 can not find a free socket的解决办法
查看>>