防止表格被撑开或div层被撑开的多种方法:
我使用了第四种,没发生什么意外,在这里和大家分享下,其他方法老师也讲过
二、使用如下代码:<img src="20080221104525991.jpg" ōnload="javascrīpt: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; (让多出来的不显示。)
分享到:
相关推荐
本文将详细探讨如何通过CSS属性实现这一目标,确保外部`<div>`的宽度不会被内部`<div>`撑开。 ### CSS中的`overflow`属性 在HTML文档中,当内部元素的尺寸超过其父级元素的尺寸时,默认情况下,父级元素会自动调整...
这样,图片过大时会被自动缩放,并隐藏超出部分,避免表格或div层被撑开。 5. **针对表格和div层的通用解决方案**: - 对于表格,推荐使用`table {table-layout: fixed;word-break: break-all;}`。`table-layout: ...
### div+css高度自适应详解 #### 一、引言 在前端开发中,随着屏幕尺寸的多样化以及响应式设计的需求日益增长,实现元素的高度自适应成为了一个重要的课题。高度自适应不仅能够确保页面在不同设备上的良好展示,还...
标题和描述中提到的问题正是关于这个需求:如何让内部的 `div` 撑开外部的 `div`,使得外部 `div` 的高度能随内容增多而自适应。 在正常情况下,如果内部 `div` 的内容高度超过外部 `div` 的固定高度,外部 `div` ...
当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。
Div即父容器不根据内容自适应高度,我们看下面的代码: 复制代码代码如下: <div id=”main”> <div id=”content”></div> </div> 当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好...
第二种解决方案是使用一个高度为1px的div或br标签来实现高度的撑开,其CSS样式如下: ```html <div style="height:1px; margin-top:-1px; clear:both; overflow:hidden;"/> ``` 或者 ```html ;"/> ``` 在这个...
这里的`width="10"`是一个技巧,即使得表格在没有图片时也有一个最小宽度,但实际图片会自动撑开表格,因此这个设置不会影响图片的显示。 这种方案的一个关键优点是它的跨浏览器兼容性。经过测试,它在IE、Firefox...
如果`.child` 设置了 `float: left` 或 `float: right`,它将会浮动到父元素的左侧或右侧,而`.parent`则不会根据`.child`的高度自适应。这可能导致`.parent`的显示不完整,因为它无法检测到内部浮动元素的真实高度...
div+css实现自适应宽度按钮 在本节中,我们将学习如何使用div+css实现自适应宽度按钮。自适应宽度按钮是一种常见的UI组件,能够根据按钮的内容自动调整宽度,而不需要手动设置宽度。 标题解释 标题“div+css实现...
Vue提供了便捷的数据绑定和响应式系统,我们可以利用这些特性来实现自适应高度的功能。 ```html <div class="auto-height-textarea"> ref="textarea" :rows="rows" @input="adjustHeight" v-model="value...
让我们深入探讨一下如何让多个 `div` 元素在同一行内显示,并讨论如何使父容器自适应子元素的大小。 首先,我们要理解默认情况下,`div` 是块级元素,它们会占据一整行并垂直堆叠。如果希望多个 `div` 在同一行内...
在网页设计中,布局是至关重要的一个环节,而“父DIV自动适应子DIV高度”是一个常见的需求,尤其在响应式设计和动态内容加载时。这个主题涉及到CSS布局、盒模型理解以及动态高度处理等多个知识点。 首先,我们来...
综上所述,通过使用div和HTML5的contenteditable属性结合CSS样式,我们可以实现一个功能强大、用户体验更佳的文本编辑区域,其高度能够随着内容的增加或减少而自适应变化,从而提供更加灵活和便捷的界面交互体验。
在IE6中,如果子`div`的高度超过了父`div`,父`div`会被自动撑开,因此可以直接通过设置`height`属性来实现。然而,从IE7开始以及Firefox浏览器,这种行为不再默认发生,它们不会自动调整父容器的高度。这就需要我们...
Firefox等标准浏览器中,固定高度的容器不会被内容自动撑开。要实现既固定高度又能根据内容自适应,可以使用`min-height`,同时为了兼容IE6,可以设置`height:auto!important; height:200px; min-height:200px;`。 ...
若想让一个块元素(如div)的高度与屏幕高度自适应,始终充满屏幕,需要从html层开始层层添加height=100%,而又因为html,body元素的width默认就是100%,因此在里面的div 设定width=100%时就能和屏幕等宽。 方法一:...
优点是兼容性好,但缺点是需要清除浮动以防止影响其他元素,并且当高度不固定时,中间内容被撑开会导致左右两栏不变。 2. **方案二:绝对定位(Absolute Positioning)** 通过设置元素的`position: absolute`,...