您现在的位置: 中华企业文化网 >> 网站代码 >> 网络制作 >> 正文
文章简介:
    
作者:未知 文章来源:本站整理 点击数: 更新时间:2008-1-12 22:42:26
网页中防止表格被撑破的方法总结
----
【阅读字号:缩小 放大
收藏到...
{$AuthorArticleList(1,True,True,200,2,3,130,90)}
{$AuthorArticleList(1,false,true,50,1,1)}
{$AuthorArticleList(1,true,true,50,0,1)}
style="WORD-BREAK: break-all"
width="575"

table{table-layout: fixed;}
td{word-break: break-all; word-wrap:break-word;}

<link href=’http://www.sinoec.net/Skin/Skinwv.css’ rel=’stylesheet’ type=’text/css’> :文库
<link href=’http://www.sinoec.net/Skin/Skinty.css’ rel=’stylesheet’ type=’text/css’> :天一

如何防止文章被撑开
~2007年04月13日 星期五 下午 04:49模板设定的宽度为790,有时上传的图片宽度大,会把表格撑开,很难看。
而5dblog中的ubb code不能直接控制图片的宽度和高度,如果每次都进入html模式太麻烦...
找到一个好方法了。。
在css中加入下面这句就可以了:
img { 
max-width: 500px; width:expression(this.width > 500 ? "500px" : this.width)
}
图片的高度也会相应变小..
img{width:expression(width>500?"500px":width);} 



用CSS如何控制网页中图片自适应大小
[ 来源: | 作者: | 时间:2007-06-21 09:42:37 | 收藏本文 ] 【大 中 小】
图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 
Chinaz^com

我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了。我们看下面的代码: Chinaz~com 
以下为引用的内容:
div img {
 max-width:600px;
 width:600px;
 width:expression(document.body.clientWidth>600?"600px":"auto");
 overflow:hidden;
} Chinaz@com 
 

中国站长_站,为中文网站提供动力
 ◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。 中国.站.长站 

 ◎ width:600px; 在所有浏览器中图片的大小为600px; 站.长站 

 ◎ 当图片大小大于600px,自动缩小为600px。在IE6中有效。 中国站.长.站 

 ◎ overflow:hidden; 超出的部分隐藏,避免控制图片大小失败而引起的撑开变形。


网页制作中,防止表格被撑破的总结的4种方法,希望对大家有用!
一、使用<img src=" 
这种方法不会引起页面显示的错乱,但是显示的图片经常是变形了的。
最不推荐了。
二、使用<img src=" 
这种方法会在调用图片的时候,会自动按比例缩小到指定的宽度,不会引起图片的变形,并且也不会撑破表格,因此就不会引起页面显示的错乱。
但也有一个缺点,如果图片太大,在显示图片过程(下载过程)中,还是会先以图片原大小显示,这时就会撑破表格,页面很难看。当然,当图片完全显示之后会自动缩小的。
三、为了防止图片撑破表格,在上述基础上,对表格进行限制:
在表格的标签<table>中加入一些限制代码,<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">就可以有效地防止表格被撑开了。
四、更进一步,用鼠标滚轮可以缩小放大图片的代码:
<SCRIPT type=text/javascript>
function bbimg(o){
 var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (zoom>0) o.style.zoom=zoom+’%’; 
 return false;
}
</SCRIPT>
使用方法如下:
<img src=" 
也可以用样式:
img {
max-width: 500px; width:expression(this.width > 500 ? "500px" : this.width)
}

防止表格被撑开或div层被撑开的多种方法在我们设计网页的时候,总会遇到一些不愉快的事情,最常见的莫过于在后台添加内容后才发现显示的页面被撑开,导致网页极度不美观。以前大家基本上都是设计表格,网上自然不少对于的解决方法,如今还有div+css标准设计,很少看到相关好的方法,现在潇湘在线把平时找到的防止表格被撑开的好方法总结归纳一下,和大家一起分享。
一、直接在网页里设置图片大小,比如代码:<img src=" 
二、使用如下代码:<img src=" 
这种方法会在调用图片的时候,自动按比例缩小到指定的宽度,不会引起图片的变形,并且也不会撑破表格,但是缺点是,如果图片太大,在图片下载过程中,也就是图片显示过程中,会先以图片原大小显示,这时就会撑破表格,页面很难看,二当图片完全显示后,图片又会自动缩小。
三、我们可以针对表格的属性来限制大小防止被撑开,比如在<table width="600" border="0" cellpadding="0" cellspacing="0">里添加代码“style="table-layout:fixed;word-wrap:break-word;word-break;break-all;"”,其中“table-layout:fixed; ”是为了将表格布局固定住,就可以有效地防止表格被撑开,“word-wrap:break-word; ”是控制换行的,也就是强制执行换行,这个在文本内容较多的情况下需要使用到,特别是重复的内容出现,不执行换行的话,表格就被撑开了;而“word-break: break-all; ”可以解决IE的框架被英文(非亚洲语言文本行)撑开的问题,但是不会强制换行,只显示表格宽度里的内容。一般情况下只要用到“style="table-layout:fixed;word-wrap:break-word;"”就可以。当然,上面调用的语句可以定义在css里,比如
table {
table-layout: fixed;
word-wrap:break-word;
}
四、用css控制图片自适应大小,代码如:
img {
max-width: 600px; 
width:expression(this.width > 600 ? "600px" : this.width);
overflow:hidden;
}
其中 max-width:600px; 在IE7、FireFox等其他非IE浏览器下最大宽度为600px,但在IE6中无效;width:600px; 在所有浏览器中图片的大小为600px,当图片大小大于600px,自动缩小为600px,在IE6中有效;而 overflow:hidden;  指将超出设置大小的部分隐藏,避免控制图片大小失败而引起的表格撑开变形。
五、最后总结一下最实用的代码:
如果是表格,请用:
table {
table-layout: fixed;
word-break: break-all;
}
如果是div层,请用:
div {
table-layout: fixed;
word-wrap: break-word;
width: 加上宽度;
overflow: hidden;    (让多出来的不显示。)   
}(中华企业文化网)
网站代码及生活常识最新文章
网站代码及生活常识热门文章
网站代码及生活常识推荐文章
相关文章
去掉{ $ ArticleAction }标签中的…
CSS定位中Position的absolute及R…
position:relative/absolute的等…
CSS中position的absolute和relat…
  • 前一段代码:
  • 后一段代码:
  • 文章录入:xisheng  责任编辑:xisheng
    热点搜索: 企业文化 愿景 使命 价值观 精神 作风 理念 企业文化咨询
    文章 下载 图片
    天一恒业企业文化咨询经典案例
    天一恒业企业文化咨询 企业文化.net 联系天一恒业 专业精深的企业文化咨询 流量最大文章资料最多的专业企业文化网站 Enterprise culture 企业文化.cn 企业文化.com 天一恒业.cn
    天一恒业专业企业文化咨询 企业文化咨询经典案例 天一咨询新闻动态 天一恒业核心文化理念及咨询观点 天一恒业咨询工具与方法 企业文化培训
    天一使命:为中国企业卓越竭己之志
    天一追求:专的高度 一的品质
    天一愿景:引领行业,事业共享
    联系我们 | 公司简介 | 加盟我们 | 企业文化 |企业文化咨询.中国 | 企业文化.net | 企业文化.中国 | 企业文化.cn | 企业文化.com | 天一恒业.中国
    北京天一恒业企业文化咨询有限公司 企业文化推广网 地址:北京市朝阳区洛克时代中心A座8A层 信箱:wsywfh@163.com 电话:010-64983591