`

子元素浮动div不会被撑大

 
阅读更多
div内部元素是浮动的,比如div中有左右两个div并列,查看生成的页面后,父div的height被设置为0,即使div的height设置为100%也没有用。这个时候需要如下设置:<wbr style="line-height:25px"></wbr>
<div<wbr></wbr>style="overflow:hidden;">
<div style="display:inline;float:left;width:274px;">
...
</div>
<div style="display:inline;float:right;width:274px;">
...
</div>
</div>
<wbr><wbr><wbr> 以上方式对ie6无效,这时需要在父div的尾部,再加一个隐藏的元素把父div撑开: <div style="line-height:25px"> <div style="line-height:25px">&lt;div class="m-box view-info" style="overflow:hidden;"&gt;</div> <div style="line-height:25px">&lt;div style="display:inline;float:left;width:274px;"&gt;</div> <div style="line-height:25px"></div> <div style="line-height:25px">&lt;/div&gt;</div> <div style="line-height:25px">&lt;div style="display:inline;float:right;width:274px;"&gt;</div> <div style="line-height:25px"></div> <div style="line-height:25px">&lt;/div&gt;</div> <div style="line-height:25px"><wbr><wbr><wbr><wbr><wbr><span style="color:#ff0000; line-height:25px">&lt;div style="display: block;height: 0px;clear: both;visibility: hidden;"&gt;&lt;/div&gt;</span></wbr></wbr></wbr></wbr></wbr></div> <div style="line-height:25px">&lt;/div&gt;</div> </div> </wbr></wbr></wbr>
分享到:
评论

相关推荐

    float元素浮动后高度不一致导致错位的解决办方法

    当N个元素浮动后,会导致错位的问题。一般给元素一个固定的height就没有这个现象。 但是当高度不一致时,就需要想别的办法来解决了: 1、给父元素定义font-size:0; 浮动子元素定义需要的font-size, 再定义display...

    DIV+CSS 清除浮动常用方法总结

    DIV+CSS 浮动效果是指,父元素在未定义高的情况下,由于子元素全部浮动脱离文本流,而造成父元素高的塌陷(PS:正常情况下,父元素的高是由子元素撑起来);或者因为部分子元素的而浮动,脱离文本流而造成其他元素的...

    子元素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...

    CSS教程:彻底弄懂闭合浮动元素

    一般说来如果某个子元素使用了浮动(float),那父元素总是不能确切地知道子元素是在什么位置结束的,所以父元素的下边框总是从子元素的中间甚至是顶部穿过,看起来很不舒服。  最近两个月断断续续做了好几个网站的...

    子Div使用Float后撑开父Div的几种方法

    一个Div包含了多个子Div,并且子Div使用了浮动后,父Div确不能被撑开,如下图: 部分代码如下: 复制代码代码如下: &lt;style&gt; #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px ...

    js下关于onmouseout、事件冒泡的问题经验小结

    问题是这样的:一个div元素要触发onmouseout事件,同时这个div内部还有子元素,于是当鼠标移动到该div的子元素上时,onmouseout事件也被触发了。在要做浮动层效果的时候会经常遇到这个问题。 解决方法一: 使用...

    自己整理div+css网页标准版式布局(50种布局方式)

    大四了,把之前学的些东西整理整理分享给大家,适合老师网页设计教材及初学者... 当子元素浮动且未知高度时,怎么使父容器适应子元素的高度? 相对定位与绝对定位 IE6双倍边距bug 4、盒模型层次平面示意图和3D示意图

    div+css有实例,易学易懂

    8.12.4 浮动子元素的问题 8.12.5 和IE6.0 相同的问题 8.13 兼容问题实例 8.13.1 纵向导航菜单的兼容 8.13.2 横向导航菜单的兼容 8.13.3 自适应高度的兼容 8.13.4 实例制作中的兼容问题 第9 章 一个英文网站的制作 ...

    CSS清除浮动使父级元素展开的三个方法

    一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开。 举个例子,有一个div容器,div容器里有两个小容器,分别向左和向右浮动,为了区别这三个容器,...

    CSS 清除网页浮动 经验

    在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理:&lt;div xss=removed&gt;&lt;/div&gt;。...这是因为子元素因进行了浮动,而脱离了文档流,导致父元素的height为零。  若将代码修改为: &lt;div style=”

    CSS 清除浮动元素方法 整理

    例如: &lt;div xss=removed&gt; &lt;div xss=removed&gt;...这是因为子元素因进行了浮动,而脱离了文档流,导致父元素的height为零。 若将代码修改为: &lt;div xss=removed&gt; &lt;div style=”float:left; width:30%; height:40px;b

    详解css清除浮动float的七种常用方法总结和兼容性处理

    高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷) 知道浮动和为什么要清除浮动之后我们可以开始学习如何清除浮动了,这时候我们就需要用到清除浮动的属性clear, ...

    什么是高度塌陷 以及高度塌陷的解决办法

    当父元素高度自适应,子元素浮动后,造成父元素高度为0,称为高度塌陷。 高度塌陷怎么解决? 方法一:给父元素一个固定的高度 缺点:给父元素固定高度违背了高度自适应的原则,不够灵活,不推荐使用。 方法二:给父...

    IE6/IE7中li底部4px空隙的Bug

    当li的子元素中有浮动(float)时,...经过测试发现:li的子元素浮动是这个bug产生的必要条件,这个bug产生的充要条件是li的子元素浮动并且li设置了以下CSS属性之一:width、height、zoom、padding-top、padding-botto

    css中float left与float right的使用说明

    4、子元素全为浮动元素的元素高度自适应问题。 以下详细分析四个问题。 一、浮动元素自动变块级元素 首先说说块级元素和行内元素区别,简单的来说,块级元素独占一行,可以设置宽高以及边距,行内元素不会独占一...

    CSS:闭合元素和浮动元素的差别

    提示:本文不是教程,而是对闭合浮动元素的方法在某个特定情况下的现象的讨论,涉及float、clear、overflow、:after等知识,新手勿入。 float属性在页面排版上非常有用,... 如果一个没有设定高度的不浮动元素的子元

    浅谈css margin重叠

    给子元素添加浮动属性,相应父元素添加必要的清浮动属性; 给父元素添加边缘属性,如padding、border; 同级元素margin反向重叠 同级元素margin反向重叠时,元素之间的距离为两个margin值中较大的那个。 因解决办法...

    JS获取浮动(float)元素的style.left值为空的快速解决办法

    如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于: style.left 返回的是字符串,如28px,offsetLeft返回的是...

    css入门笔记

    注意:大部分行内元素不能修改 span,a,i,u,b,s 3.溢出处理 当内容多,元素区域小的时候,会产生溢出的效果,默认都是纵向溢出 属性:overflow,overflow-x,overflow-y 取值: 1.visible 可见的,默认值,溢出...

Global site tag (gtag.js) - Google Analytics