在我们设计网页的时候,总会遇到一些不愉快的事情,最常见的莫过于在后台添加内容后才发现显示的页面被撑开,导致网页极度不美观。以前大家基本上都是设计表格,网上自然不少对于的解决方法,如今还有div+css标准设计,很少看到相关好的方法,现在潇湘在线把平时找到的防止表格被撑开的好方法总结归纳一下,和大家一起分享。
一、直接在网页里设置图片大小,比如代码:<img src="/u/info_img/2007-12/31/www.xker.com.jpg" width="600" height="500" border="0">,这样虽然可以限制了图片大小,但是需要在上传图片之前手动修改图片大小,否则上传的图片就会变形。
二、使用如下代码:<img src="/u/info_img/2007-12/31/www.xker.com.jpg" onload="javascript:if(this.width>600}{this.resized=true;this.style.width=600;}">
这种方法会在调用图片的时候,自动按比例缩小到指定的宽度,不会引起图片的变形,并且也不会撑破表格,但是缺点是,如果图片太大,在图片下载过程中,也就是图片显示过程中,会先以图片原大小显示,这时就会撑破表格,页面很难看,二当图片完全显示后,图片又会自动缩小。
三、我们可以针对表格的属性来限制大小防止被撑开,比如在<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; //注意表格使用word-break: break-all属性无效(firefox中)
}
如果是div层,请用:
div {
table-layout: fixed;
word-wrap: break-word;
width: 加上宽度;
overflow: hidden; (让多出来的不显示。)
}
分享到:
相关推荐
div中的内容没有把div撑开的原因及解决办法
外部DIV如何强制宽度不被内部DIV撑开
NULL 博文链接:https://rainbow702.iteye.com/blog/2219848
在我们设计网页的时候,总会遇到一些不愉快的事情,最常见的莫过于在后台添加内容后才发现显示的页面被撑开,导致网页极度不美观。以前大家基本上都是设计表格,网上自然不少对于的解决方法,如今还有div css标准...
DevExpress.XtraGrid 是一个很强大的表格显示组件,但如果表格的每一列用设计器来设计还是很花时间的,也不通用。但如果使用了这个类,做一个表格就非常简单了,只需传字段、显示的名称、宽度,即可自动生成表格出来...
表格对齐方式center/right/left" border="表格边框 默认没有边框" cellpadding="文字和单元格之间边距 默认为1" cellspacing="单元格和单元格之间间距 默认为2" width="表格宽度" height="表格高度"> <thead> ...
内容把td撑开的情况想必大家都有遇到过吧,解决方法有很多,下面本文为大家介绍下一种常见的解决方法,感兴趣的朋友可以参考下哈,希望对大家有所帮助
在做table页面时,有时对td设置的宽度是无效的,td的宽度始终有内部的内容撑开,可以设置padding,但直接设置width却无效,下面我们来具体看下这个示例: 复制代码代码如下: <div> ”1px”> <tr> ”100px” xss=...
当不给某列设置宽度时这一列的...这个表格中只有序号有固定宽度, 那么余下所有列平分表格剩余宽度, 被定为的权属人的新列宽度是由内容撑开的, 所有新列比原列短, 就出现了空缺 表格空缺 结论: 所有被定位的列一定要
光标停在文字最后,防止前台页面撑开,消除图像工具,隐藏在状态栏里出现的LINK信息栏,
colResizable是拖动表格线条改变列宽的工具,非常好用
下面的代码解决了这个问题:当表格被载入的时候,TD的宽度是原定的长 度,不会撑开TD,也不会影响其他TD,点击某行会按照本行所有单元格中行数最多的单元格的长度伸长行高。用户体验很好。 【优点】 1、对开发人员...
许多应征前端工程师的人,在面试时都会被问到这类float的问题。例如:div元素内的两个子元素p都float:left,外面的div会变成没有高度,此时该怎么办呢?通常解法是在排版流里面的元素加一个after的伪元素,将它设成...
希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应,下面有个示例大家可以参考下
一个Div包含了多个子Div,并且子Div使用了浮动后,父Div确不能被撑开,如下图: 部分代码如下: 复制代码代码如下: <style> #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px ...
这里本来DIV1是套在了DIV2的外面的,如果是使用表格做的话,那么DIV1肯定被撑开了,效果应该是如下所示 那如何解决这个浮动了之后无法把容器撑开的局面呢?解决的方法这里介绍2仲。 第一种:在浮动结束的容器后面...
我们项目中使用的表格一般...3、支持根据内容自动撑开列宽 4、支持动态筛选表头 5、支持分页 6、防抖 7、列权限 … 更多请自行尝试 以下是tableList 组件的代码 <!--刷新按钮 和 筛选列的多选框 layout中要有 co
在工作中评论内容测试遇到评论着的评论内容为:“dddddddddddddddddddddddddddddddddddddddddddddddddd”,错误的评论,在显示评论列表的时候因为有固定宽,但是显示的内容超出的了div的宽,在这种情况下我们需要...