• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > 网页表格或div层在网页中被撑开解决之道

网页表格或div层在网页中被撑开解决之道

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含网页,解决,表格,",图片,大小,可以,显示,代码,600px等相关知识,佚名 希望在学习及工作中可以帮助到您

在我们设计网页的时候,总会遇到一些不愉快的事情,最常见的莫过于在后台添加内容后才发现显示的页面被撑开,导致网页极度不美观。以前大家基本上都是设计表格,网上自然不少对于的解决方法,如今还有div css标准设计,很少看到相关好的方法,现在潇湘在线把平时找到的防止表格被撑开的好方法总结归纳一下,和大家一起分享。
一、直接在网页里设置图片大小,比如代码:<img src="http://www.jb51.net/images/jb51com.jpg" width="600" height="500" border="0">,这样虽然可以限制了图片大小,但是需要在上传图片之前手动修改图片大小,否则上传的图片就会变形。
二、使用如下代码:<img src="http://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; (让多出来的不显示。)
}

您可能想查找下面的文章:

  • 浅谈Html网页表格结构化标记的应用
  • HTML基础必看---表单,图片热点,网页划区和拼接详解
  • 移动端网页大小自适应的实现方法
  • 在网页上调用桌面exe程序的简单方法
  • Adobe Brackets 简单使用图文教程
  • 网站不允许直接复制页面内容或信息的解除方法
  • html网页中meta viewport属性说明
  • 网页嵌入百度地图和使用百度地图api自定义地图的详细步骤
  • html文档基本结构(制作网页基础知识)
  • html网页插入图片、加入地图索引示例讲解

相关文章

  • 2017-08-05关于input的file 控件及美化
  • 2017-08-05输入一个网址的时候,后台到底发生了一件件什么样的事
  • 2017-08-05W3C教程(12):W3C Soap 活动
  • 2017-08-05html标签:sub标记和sup标记
  • 2017-08-21利用微软在线预览链接展示office相关文档内容
  • 2017-08-05用jquery进行修复在iframe下的页面锚点失效问题
  • 2017-08-05Html/Css(新手入门第一篇必看攻略)
  • 2017-08-05HTML基础 HTML的组成结构
  • 2017-08-05HTML 中的 dl(dt,dd)、ul(li)、ol(li) 使用方法
  • 2017-08-05按钮在IE中两边被拉伸的 BUG

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML实现简单计算器附详细思路
    • 控制input标签只能输入数字
    • 文字滚动后自动停止效果示例
    • 网页制作基础 声明文档类型描述(DTD
    • 将html文本中所有的标签替换掉的方法
    • XHTML中不再使用HTML中的一些废弃元素
    • Html 元素隐藏的几种方式
    • 详解html中的marquee属性
    • HTML Marquee 字符片段滚动
    • html中如何使用JavaScript

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有