文章插图
文章插图
用TABLE和DIV做页面布局设计的时候,遇到大尺寸的图片和长英文字符串,布局中定义的尺寸都会被破坏,导致页面布局变形.
【CSS实现避免页面布局被大尺寸图片和长字符串破坏】有没有办法可以解决呢?
用CSS的属性OVERFLOW:hidden可以来控制,这样超出部分会自动隐藏,这样做不好的地方是就是这部分的信息显示不完全,比如图片只显示了一部分. 但是页面布局不会乱.
要注意的是,使用overflow的时候,一定要定义width,百分比或者具体值都可以.
在使用DIV做页面布局的时候,可以在大布局上定义,比如在左栏,右栏,中栏里面,也可以针对页面中具体的某个布局元素.
在用ul和li做图片列表排列的时候,也可以用这个,这样避免一些大尺寸图搞乱布局,也可以解决浏览器窗口缩小时,li元素自动回行排列出错的问题.
BTW:用overflow:auto,还可以在页面里模仿出IFRAME的效果,回头写出来
没有使用overflow:hidden
在这里来一个宽度大于200px的图片吧!
文章插图
使用了overflow:hidden
这里同样放那个图片比较一下效果啊!
文章插图
以上就是CSS实现避免页面布局被大尺寸图片和长字符串破坏,希望大家喜欢,请继续关注我们 。
推荐阅读
- 四川疾控提醒:游泳卫生不注意 小心“结膜炎”找上你
- 状语后置句怎么判断
- 辣根的功效与作用
- 在昨日的第一条推送中收集英雄们给玩家六周年祝福的英雄是哪位 王者荣耀10月29日每日一题答案
- 能单独买重疾险吗
- 东河是属于哪个省
- Win7 64位/32位系统支持多大内存?64/32位系统有什么区别?
- 卫生巾怎么用 不知道的快看看
- 王者荣耀限时点券概率是多少 王者荣耀限时点券概率介绍