`
zccst
  • 浏览: 3319846 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

div被撑大

 
阅读更多
作者:zccst
情形二:外层div高度自适应,内部还有div正文。直接使用height:auto无效
即:
<div class="w">
    <div class="left">左侧内容</div>
    <div class="right">右侧内容</div>
    <div style="clear:both;"></div><!--主要是这句-->
</div>




情形一:How To Clear Floats Without Structural Markup

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Windows IE并不支持这样做。所以要让IE也完美显示,则必须在clearfix这个CSS定义的后面加上一些专门为IE设定的HACK。CSS如下:

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */



因为转义字符”\”,Mac IE浏览器会忽略掉这段Hack,但Windows IE不会,它会应用 * html .clearfix {height: 1%;} 来达到撑开DIV容器的目的(貌似Mac IE没有办法解决这个问题,不过幸好用户数量是在是太少了,Safari支持就可以了:p)。

测试一下,果然大功告成。
分享到:
评论

相关推荐

    外部DIV如何强制宽度不被内部DIV撑开

    本文将详细探讨如何通过CSS属性实现这一目标,确保外部`&lt;div&gt;`的宽度不会被内部`&lt;div&gt;`撑开。 ### CSS中的`overflow`属性 在HTML文档中,当内部元素的尺寸超过其父级元素的尺寸时,默认情况下,父级元素会自动调整...

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

    然而,有时我们可能会遇到一个问题,即`div`元素没有被其内部内容“撑开”,也就是说,`div`的高(height)并没有根据内容自动调整。这可能会导致`div`看起来是空的,或者部分内容被隐藏。下面我们将详细探讨这个...

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

    标题中的“css1--关于float的div撑不起父div的问题”指的是在CSS布局中常见的一个技术挑战。在网页设计中,我们经常使用`float`属性来实现元素的浮动,以便进行布局,比如创建多列布局或者使文本环绕图片。然而,...

    jquery DIV撑大让滚动条滚到最底部代码

    同时,若DIV元素没有设置高度值或者高度值为0,使用“height”方法可能无法正确获取高度,因此在实际开发中,我们可能需要先确保DIV元素的高度是可被正确计算的。 在编写相关代码时,还要注意,确保在文档的DOM完全...

    css自动换行 防止撑破div影响排版

    /div &gt;css#wrap{white-space:normal; width:200px; }1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行 #wrap{word-break:break-all; width:200

    里面的div怎么撑开外面的div让高度自适应

    标题和描述中提到的问题正是关于这个需求:如何让内部的 `div` 撑开外部的 `div`,使得外部 `div` 的高度能随内容增多而自适应。 在正常情况下,如果内部 `div` 的内容高度超过外部 `div` 的固定高度,外部 `div` ...

    获取图片或者div上的点坐标--带例子

    然而,由于图片可能被缩放或CSS定位,这些原始坐标并不直接对应于图片像素。因此,我们需要对坐标进行转换。对于图片,我们可以通过以下步骤得到像素坐标: 1. 获取图片元素`&lt;img&gt;`,并读取其`offsetWidth`和`...

    div+css 兼容性总结

    在嵌套`div`的情况下,避免设置内层`div`宽度为`100%`,否则可能导致外层`div`宽度被撑大。在IE6中,若边框不为0,会超出外层`div`,且会带动外层宽度增加,而IE7和Firefox则保持外层宽度不变,内层宽度增加。 2. *...

    子元素div高度不确定时父div高度如何自适应

    在最外层div加以下样式 height:100%; overflow:hidden; 其它方法: Div即父容器不根据内容自适应高度,我们看下面的代码: 复制代码代码如下: &lt;div id=”main”&gt; &lt;div id=”content”&gt;&lt;/div&gt; &lt;/div&gt; 当Content...

    DIV+CSS浏览器的兼容性_大前端1

    在网页设计中,DIV+CSS布局是现代网页标准之一,但在不同的浏览器间存在诸多兼容性问题,特别是老版本的浏览器,如Internet Explorer 6 (IE6)。这些兼容性问题通常涉及字体、高度、宽度、边距、背景以及浮动元素等。...

    兼容多浏览器,兼容 div、p、td 的强制不换行及强制换行.

    在这种情况下,可以使用 `overflow: hidden` 来防止内容撑大容器,但这样做可能会导致内容被裁剪。 **深入理解CSS属性** - **`white-space`**: 控制空白符和换行。 - `normal`: 压缩多余空白并允许换行。 - `...

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    在网页布局设计中,我们经常会遇到这样一个问题:当一个元素(如`div`)的宽度设置为`width: 100%`时,如果再添加`padding`或`margin`,元素的总尺寸会超出其父元素的宽度,导致布局混乱。为了解决这一问题,我们...

    select网页下拉列表与div层遮盖问题

    在html中关于select元素的问题在很多地方都提出过,而在前段...相关文章:div层被flash层遮盖问题解决思路 第一就是比较有名的:一般div浮层在IE6下无法遮盖select元素的问题。首先提供了下面一个实例: 注解:如果

    单元格撑大 层 密码显示可变 漂浮广告 html javascript

    ### 单元格撑大的实现方法 在网页布局中,有时需要让表格中的单元格随着内容的增加而自动撑大宽度或高度。这可以通过CSS来实现。 #### 1. 使用`word-break`和`word-wrap` - **`word-break`属性**:用于控制如何...

    CSS+DIV布局内容不满一屏时页底始终固定在底部_无横滚条_多浏览器兼容

    4.本例子只解决了页面不满一屏时的页底浮动问题,如果你的页面撑满一页有竖滚动条时,页底是固定不变的。 5.关于第4点本人认为,并不是这个解决方案有缺陷。因为你不应该用这个例子解决你的既要满屏居低又要超一屏还...

    CSS 数字和字母将容器撑大问题解决

    但是,对于连续的英文字符和数字,浏览器不会自动在单词内部进行换行,这就可能导致容器被撑大。 针对这种情况,我们可以使用以下两种方法: 1. **针对IE浏览器**: - 使用`word-break: break-all;`属性可以在...

Global site tag (gtag.js) - Google Analytics