防止表格被撑开或div层被撑开的多种方法
在我们设计网页的时候,总会遇到一些不愉快的事情,最常见的莫过于在后台添加内容后才发现显示的页面被撑开,导致网页极度不美观。以前大家基本上都是设计表格,网上自然不少对于的解决方法,如今还有div+css标准设计,很少看到相关好的方法,现在潇湘在线把平时找到的防止表格被撑开的好方法总结归纳一下,和大家一起分享。
一、直接在网页里设置图片大小,比如代码:<imgsrc="http://www.krjpg.cn/www.xxol.net.jpg"width="600"height="500"border="0">,这样虽然可以限制了图片大小,但是需要在上传图片之前手动修改图片大小,否则上传的图片就会变形。
二、使用如下代码:<imgsrc="http://www.krjpg.cn/www.xxol.net.jpg"onload="javascript:if(this.width>600}{this.resized=true;this.style.width=600;}">
这种方法会在调用图片的时候,自动按比例缩小到指定的宽度,不会引起图片的变形,并且也不会撑破表格,但是缺点是,如果图片太大,在图片下载过程中,也就是图片显示过程中,会先以图片原大小显示,这时就会撑破表格,页面很难看,二当图片完全显示后,图片又会自动缩小。
三、 我们可以针对表格的属性来限制大小防止被撑开,比如在<tablewidth="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;(让多出来的不显示。)
}
摘自【http://www.twocity.cn/blog/article.asp?id=863】
<!-- Google Reader shared发布代码开始 --><script type="text/javascript" src="http://www.google.com/reader/ui/publisher.js"></script><script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&callback=GRC_p(%7Bc%3A%22green%22%2Ct%3A%22%5Cu8FD9%5Cu4E9B%5Cu6587%5Cu7AE0%5Cu4E5F%5Cu503C%5Cu5F97%5Cu4E00%5Cu770B%22%2Cs%3A%22false%22%7D)%3Bnew%20GRC"></script><!-- Google Reader shared发布代码结束 --><!-- Feedsky FEED发布代码开始 --><!-- FEED自动发现标记开始 --> 点击这里使用RSS订阅本Blog:
<link rel="alternate" href="http://feed.feedsky.com/softwave" type="application/rss+xml" title="RSS 2.0">
<!-- FEED自动发现标记结束 --><script language="javascript"><!--
main_sub="c1s67";
more_subs="";
--> </script><script language="javascript" src="http://www.feedsky.com/jsout/publishlist_v2.js?burl=softwave&out_html=true"></script><!-- Feedsky FEED发布代码结束 -->
分享到:
相关推荐
div中的内容没有把div撑开的原因及解决办法
外部DIV如何强制宽度不被内部DIV撑开
在我们设计网页的时候,总会遇到一些不愉快的事情,最常见的莫过于在后台...以前大家基本上都是设计表格,网上自然不少对于的解决方法,如今还有div css标准设计,很少看到相关好的方法,现在潇湘在线把平时找到的防止
这里本来DIV1是套在了DIV2的外面的,如果是使用表格做的话,那么DIV1肯定被撑开了,效果应该是如下所示 那如何解决这个浮动了之后无法把容器撑开的局面呢?解决的方法这里介绍2仲。 第一种:在浮动结束的容器后面...
一个Div包含了多个子Div,并且子Div使用了浮动后,父Div确不能被撑开,如下图: 部分代码如下: 复制代码代码如下: <style> #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px ...
希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应,下面有个示例大家可以参考下
许多应征前端工程师的人,在面试时都会被问到这类float的问题。例如:div元素内的两个子元素p都float:left,外面的div会变成没有...也会撑开div呀!如下:长知识了。 XML/HTML Code复制内容到剪贴板 <body>
NULL 博文链接:https://rainbow702.iteye.com/blog/2219848
光标停在文字最后,防止前台页面撑开,消除图像工具,隐藏在状态栏里出现的LINK信息栏,
1.表格作用:表格用来展示数据 2.写法 表格对齐方式center/right/left" border="表格边框 默认没有边框" cellpadding="文字和单元格之间边距 默认为1" cellspacing="单元格和单元格之间间距 默认为2" width="表格...
如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。使用clearfix:after,可以解决这个问题
DevExpress.XtraGrid 是一个很强大的表格显示组件,但如果表格的每一列用设计器来设计还是很花时间的,也不通用。但如果使用了这个类,做一个表格就非常简单了,只需传字段、显示的名称、宽度,即可自动生成表格出来...
NULL 博文链接:https://xnbhnly.iteye.com/blog/1312073
在工作中评论内容测试遇到评论着的评论内容为:“dddddddddddddddddddddddddddddddddddddddddddddddddd”,错误的评论,在显示评论列表的时候因为有固定宽,但是显示的内容超出的了div的宽,在这种情况下我们需要...
一个div可自行编辑,任意输入文字可自动换边且不变形