`

table和div层被撑开的解决方式

阅读更多
最为实用的解决办法:

   1、如果是表格,请用:

  
table {table-layout: fixed; word-break: break-all;}


  2、如果是div层,请用:
   
   
div {
             table-layout: fixed;
             word-wrap: break-word;
             width: 加上宽度;
             overflow: hidden;    (让多出来的不显示。)  
            }


       3、用css控制图片自适应大小,代码如:
   
   
 img {
              max-width: 600px;
              width:e­xpression(this.width > 600 ? "600px" : this.width);
              overflow:hidden;
              }

     其中 max-width:600px; 在IE7、FireFox等其他非IE浏览器下最大宽度为600px,但在IE6中无效;width:600px; 在所有浏览器中图片的大小为600px,当图片大小大于600px,自动缩小为600px,在IE6中有效;而 overflow:hidden;  指将超出设置大小的部分隐藏,避免控制图片大小失败而引起的表格撑开变形。
分享到:
评论

相关推荐

    html div没有被撑开的原因及解决办法

    通过使用`lj_设置子dom的height 100%即可.png`、`必须清除子dom的float才能撑开父dom.txt`、`absolute存在的时候floate会失效.txt`、`css - div层为什么没有被自动撑开-.url`这些资源,你可以更深入地学习和实践这些...

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

    标题和描述中提到的问题——“网页表格或div层在网页中被撑开”,是设计师经常遇到的挑战。当表格或div容器内的内容(如图片、文字)过大时,如果不进行适当处理,会导致整个页面布局失衡,影响用户体验。以下是一些...

    table 中,如何使得单元格的内容不换行,单元格不被撑开,显示不下的时候在结尾处显示“...”

    总结,要让表格单元格内容不换行,单元格不被撑开,并在显示不下的时候在结尾处显示“...”,你需要通过CSS设置`white-space`、`overflow`和`text-overflow`属性,并为单元格设定一个固定的宽度。同时,确保所有可能...

    css实现不再让内容把td撑开的常用解决方法

    通过这种方式,即使单元格中的内容很长,也不会再把单元格撑开,而是保持设定的宽度,超出部分的内容会被隐藏并显示省略号。这个解决方案在处理长文本或者不确定内容长度的情况下非常实用,可以有效地保持表格的整洁...

    详解在table设置max-width以及min-width兼容问题和解决方案

    在table中设置min-width和max-width...解决方案:在table外层包一个div,在div上设置min-width和max-width <div class=table-wrap> <table> <tr><td>1</td><td>2</td></tr> </table> </div> .table-wrap{width:5

    火狐在用offsetHeight获取div的高度时为0的解决方法

    要解决这个问题,首先需要了解offsetHeight属性的计算方式和浮动布局对布局的影响。在正常流中,一个设置了浮动的元素仍然会占据空间,但是它不会像正常块级元素那样影响后续元素的布局。在DOM中,一个设置了浮动的...

    css1--关于float的div撑不起父div的问题

    然而,这种浮动特性可能会导致一些意料之外的结果,其中之一就是“父级元素无法被子元素完全撑开”,即父级`div`不会根据内部浮动`div`的大小自动调整其高度。 这个现象的原因在于,当元素浮动后,它会脱离常规文档...

    让DIV兼容的方法

    div, table { margin: 2px; padding: 2px; overflow: hidden; } ``` ##### 3. 有高则高,无高而高 - **有高则高** - **解释**:当为一个元素定义了固定的高度时,应该同时设置其`line-height`或`overflow`...

    table自动拉伸在chrome与IE中的兼容性问题解决

    本文主要探讨了在Chrome和IE浏览器中,table自动拉伸时的兼容性差异,并提供了相应的解决方案。 首先,我们要理解问题的核心:table在自动拉伸时,如何处理td(表格单元格)的宽度分配。在两种主流浏览器——Chrome...

    JavaScript Table行定位效果

    给tr设置relative后就能相对table定位了,看来很简单啊,但问题是这个方法ie8和ff都无效,而且存在很多问题,所以很快就被抛弃了。 ps:该效果用来做tr的拖动会很方便。 接着想到的是给table插入一个新tr,克隆原来...

    CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器).docx

    此外,文章还提到了一些相关的CSS和jQuery在处理表格时的示例,如列表标签`<list>`与表格标签`<table>`的用法,使用jQuery和CSS实现表格行列转置,样式切换,以及通过JavaScript和CSS的`expression`实现表格居中显示...

    前端兼容问题大全

    在IE和FireFox中,float的div闭合、清除浮动和自适应高度的处理方式不同。解决方法是使用统一的方法来处理float的div闭合、清除浮动和自适应高度。 三十三、高度不适应 在IE和FireFox中,高度不适应的处理方式不同...

    div+css布局中常用方法汇总.docx

    【div+css布局中常用方法】在网页设计中,Div+CSS布局是现代网页开发的基础,它通过HTML的div元素和CSS样式来控制页面布局,提供了更灵活、可维护性更强的设计方式。以下是一些在div+css布局中常用的技术和方法: 1...

    表格单元格td设置宽度无效始终有内部的内容撑开

    在网页设计中,表格(`<table>`)是一种常见的数据展示方式,而表格中的单元格(`<td>`,即Table Data Cell)是承载数据的基本元素。然而,在实际操作中,有时我们会遇到一个棘手的问题:给`<td>`设置宽度(`width`...

    table中td内容换行问题

    例如l:lovelovelovelovelovelovelovelovelovelovelovelove这样的,于是乎,我们的td就被无情的撑开了,无法换行,⊙﹏⊙ 解决方案: 一般有两种:就是td里面再套一个div,然后设置这个div的word-break:all,或者...

    DIV设置float后父容器无法定位高度的问题解决方法

    然而,当我们在 `div` 元素上应用 `float` 属性时,会引发一个问题,即父容器无法自动扩展以包含所有的浮动子元素,这被称为“浮动塌陷”(Float Collapse)。为了解决这个问题,一种常见的方法是使用“清除浮动”...

    关于学习DIV CSS的一些精妙问答

    若要使一个层(div)覆盖在FLASH之上,需要在FLASH对象的参数中设置`wmode`为`transparent`,这样层就能正确地覆盖在FLASH之上。 7. **层的垂直居中**: 实现层在浏览器中垂直居中的常见方法是使用绝对定位。CSS...

    html中的div、td 、p 等容器内强制换行和不换行的实现

    在表格中,可以使用 `table-layout: fixed` 来控制表格的布局算法,使其根据列宽而不是内容宽度进行布局,以避免单元格内容撑开表格。 ```css table { table-layout: fixed; } ``` 这样,表格的宽度将仅取...

Global site tag (gtag.js) - Google Analytics