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


有没有办法可以解决呢?

用CSS的属性OVERFLOW:hidden可以来控制,这样超出部分会自动隐藏,这样做不好的地方是就是这部分的信息显示不完全,比如图片只显示了一部分. 但是页面布局不会乱.
要注意的是,使用overflow的时候,一定要定义width,百分比或者具体值都可以.
在使用DIV做页面布局的时候,可以在大布局上定义,比如在左栏,右栏,中栏里面,也可以针对页面中具体的某个布局元素.

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

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

在线运行演示



7条评论

  1. “SGER博客”是一种十分简单操作容易的个人信息、日记发表方式博客服务站。SGER博客为你提供私人的空间,可以在这里发布你的日记、新闻、生活故事、思想里程、情感记录等等!更可以利用这个blog向网友展示你个性的一面,让朋友更了解你。

    SGER博客,提供属于你的空间!www.SGER.net

  2. donews的blog系统提供的rss源有问题啊

    或者是他服务器慢

    作者能否从新提供一个rss订阅地址

  3. 最讨厌265

  4. 不错,一直很郁闷有人留言时加上长链接,现在搞定了,谢谢。

    ps:能不能把你首页的日志数目设少些啊?这样一下打开这么长的页面,也太慢了点。

  5. 迎新年,换模版,找到几条有用的css和公告栏代码。

  6. ding

  7. 我在您这个在线运行框里面测试了一下overflow:auto的效果并不太好,这样的话会出现一个或两个滚动条。这种效果不是我想要的。可不可以让图片自动缩小适应这个长度呢?就像缩略图形式。

发表评论

评论也有版权!