WEB标准网站设计心得:如何彻底避免页面布局被大尺寸图片和长字符串破坏

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

265.com265.com265.com265.com265.com265.com265.com265.com265.com265.com<br />

<img src="http://blog.donews.com/images/blog_donews_com/dodo/54776/o_tibet_1.gif" />

</div>

<br />

使用了overflow:hidden<br />

<div style="overflow:hidden;width:200px;background:green;color:#fff;padding:8px">

265.com265.com265.com265.com265.com265.com265.com265.com265.com265.com<br />

<img src="http://blog.donews.com/images/blog_donews_com/dodo/54776/o_tibet_1.gif" />

</div>

 

 

声明：此文章部分或者全部内容来源于网络，如果侵犯到您的权利，请电邮我(dushizhuma(a)163.com)，我将在第一时间内删除此文章并送出我的歉意！