您现在的位置: 圆点视线 >> 教程 >> 网页设计 >> CSS样式表 >> 文章正文
[图文]CSS实现避免页面布局被大尺寸图片和长字符串破坏           ★★★
CSS实现避免页面布局被大尺寸图片和长字符串破坏
作者:网页设计…  文章来源:网页设计师联盟  点击数:  更新时间:2007-11-18 18:00:13 
 页面功能:【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口 【字体:

  用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>

 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 文章录入:Rainsion    责任编辑:Rainsion  【字体:
 
  • 上一篇文章:

  •  
  • 下一篇文章: 没有了
  • 最新文章
    相关文章
    垂直三栏布局拥有相同高度的方法
    学习WEB标准制作网页之Page Layout 网页布局
    使用有趣的自定义标记布局页面
    使用有趣的自定义标记来布局页面
    网页布局理念
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    发表评论:
     姓  名: 评 分: 1分 2分 3分 4分 5分
     评论内容: ·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
    ·用户需对自己在使用本网服务过程中的行为承担法律责任
    ·本站管理员有权保留或删除评论内容。
    ·评论内容只代表机友个人观点,与本网站立场无关。
     
    最 新 推 荐
     
    百度主题推广
    最 新 热 门