网页表格或div层在网页中被撑开解决之道
发布时间：2020-03-28 17:07:52 所属栏目：编程 来源：站长网
导读：在我们计划网页的时辰，总会碰着一些不舒畅的工作，最常见的莫过于在靠山添加内容后才发明昭示的页面被撑开，导致网页十分不雅观。早年各人根基上都是计划表格，网上天然不少对付的办理要领，现在尚有div css尺度计划，很少看到相干好的要领，此刻潇湘在线
|
在我们计划网页的时辰，总会碰着一些不舒畅的工作，最常见的莫过于在靠山添加内容后才发明昭示的页面被撑开，导致网页十分不雅观。早年各人根基上都是计划表格，网上天然不少对付的办理要领，现在尚有div css尺度计划，很少看到相干好的要领，此刻潇湘在线把平常找到的防备表格被撑开的好要领总结归纳一下，和各人一路分享。 一、直接在网页里配置图片巨细，好比代码：<img src=http://www.jb51.net/web/"https:/www.jb51.net/images/jb51com.jpg" width="600" height="500" border="0">，这样固然可以限定了图片巨细，可是必要在上传图片之前手动修改图片巨细，不然上传的图片就会变形。 二、行使如下代码：<img src=http://www.jb51.net/web/"https:/www.jb51.net/images/jb51com.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; } 假如是div层，请用： div { table-layout: fixed; word-wrap: break-word; width: 加上宽度; overflow: hidden; (让多出来的不表现。) } （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读