首页  韩国资源  酷站加油  我的展厅  设计名站  古典元素  推荐下载  设计欣赏  每周专访  招募精英  人才专区  网页教程  平面设计  编程开发  设计竞赛
当前位置:首页 > 网页教程 > HTMLCSS教程 > 正文
Google
CSS实现避免页面布局被大尺寸图片和长字符串破坏
来源:网页教学网 2006年05月16日 16:21 网友评论:0条 点击:

  用TABLE和DIV做页面布局设计的时候,遇到大尺寸的图片和长英文字符串,布局中定义的尺寸都会被破坏,导致页面布局变形.

  有没有办法可以解决呢?

  用CSS的属性OVERFLOW:hidden可以来控制,这样超出部分会自动隐藏,这样做不好的地方是就是这部分的信息显示不完全,比如图片只显示了一部分. 但是页面布局不会乱.

  要注意的是,使用overflow的时候,一定要定义width,百分比或者具体值都可以.

  在使用DIV做页面布局的时候,可以在大布局上定义,比如在左栏,右栏,中栏里面,也可以针对页面中具体的某个布局元素.

  在用ul和li做图片列表排列的时候,也可以用这个,这样避免一些大尺寸图搞乱布局,也可以解决浏览器窗口缩小时,li元素自动回行排列出错的问题.

  BTW:用overflow:auto,还可以在页面里模仿出IFRAME的效果,回头写出来

没有使用overflow:hidden<br />
<div style="width:200px;background:green;color:#fff;padding:8px">
在这里来一个宽度大于200px的图片吧!<br />
<img src="宽度大于200px的图片的路径" />
</div>
<br />
使用了overflow:hidden<br />
<div style="overflow:hidden;width:200px;background:green;color:#fff;padding:8px">这里同样放那个图片比较一下效果啊!<br />
<img src="宽度大于200px的图片的路径" />
</div>

上一篇:添加到收藏夹的Javascript脚本-适合IE和Firefox   下一篇:旁门左道 你没见过的CSS效果
收藏此页】【打印】【关闭
 相关文章  我要点评

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 在线反馈 | 广告报价 | 友情链接 | 联系我们 | 免责声明 | 在线投稿 | 网站地图
Copyright © 2003-2007 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】