子div撑不开父div的几种解决方法
子div撑不开父div的情况:
<style> .example{ background: #008000; width: 400px; margin: 10px; padding: 10px; } .example .childrenDiv{ float: left; height: 100px; width: 100px; word-break: break-all; word-wrap: break-word; } </style> <!--示例--> <div class="example"> <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div> <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div> </div>
显示结果:
解决方法:
(一):加<div style="clear:both;"></div>
代码实例:
<!--方法一--> <div class="example"> <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div> <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div> <!--解决方法--> <div style="clear: both;"></div> </div>
显示结果:
分析:
父div作为外部容器,子div设置了float样式,则外部容器div因为内部没有clear导致不能被撑开,即内部div因为float:left之后,就丢失了clear:both和display:block的样式。
(二):通过伪元素将父容器撑开
代码实例:
<style> .clearfix:after{ content:"."; display: block; height: 0; clear: both; visibility: hidden; } /* Hides from IE-mac \*/ *html.clearfix{height: 1%;} /*end hide from IE-mac*/ </style> <!--方法二--> <div class="clearfix example"> <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div> <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div> </div>
显示结果:
分析:
1.不建议采用第一种方法,首先,代码中多了一个没有意义的div;其次,在用dojo做Drag&Drop的时候,由于这个div是父容器div的一个子节点,如果这个节点被移动,则会造成排版上的错误,而且如果要将子div移动到这个div之后,则会因为clear:both被强制换行显示。
2.方法二原理:after伪对象将在应用clearfix的元素的结尾添加content中的内容,在这里添加了一个“.”,并且把它的display设置成了block,高度设为0,clear设为both,visibility设为隐藏,即撑开容器。
3.因为windows IE不支持上述做法,所以要在IE上也完美显示,则必须在clearfix的css定义的后面加一些专门为IE设定的hack,即:
/* Hides from IE-mac \*/ *html.clearfix{height: 1%;} /*end hide from IE-mac*/
因为转移符“\”,Mac IE浏览器会忽略掉这段hack,但window IE不会,它会应用*html.clearfix{height:1%;}来达到撑开div容器的目的(貌似Mac IE没有办法解决这个问题,不顾用户数量太少,Safari支持就可以了O(∩_∩)O哈哈~)。
(三)父容器增加一个属性:overflow:hidden
代码实例:
<!--方法三--> <div class="example" style="overflow: hidden;"> <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div> <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div> </div>
显示结果:
(四)父容器增加一个属性:display:table
代码实例:
<!--方法四--> <div class="example" style="display: table;"> <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div> <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div> </div>
显示结果:
相关推荐
给大家介绍了div被iframe遮住的一些情况,以及被遮住后的解决办法,有需要的朋友们可以参考借鉴。
一个Div包含了多个子Div,并且子Div使用了浮动后,父Div确不能被撑开,如下图: 部分代码如下: 复制代码代码如下: <style> #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px ...
主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。
几种常见的DIV边框样式
收集的一些div特效 包括现在很流行的qq在线和爱心墙希望对大家有用
几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar几种常见的DIV边框样式.rar...
几种样式的DIV弹出层,比较简单,实用。
里面包括了相册,清新,简洁,游戏,星座,网上超市,博客等几种标准模板
DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所帮助。...
H5 loading div层几种样式
我们可以直接对document的click事件绑定事件处理程序,在事件处理程序中判读事件源是否为id==test的div元素或其子元素,如果是则方法return不做操作,如果不是则隐藏该div。 参考文档:...
现在网上到处都是div+css模板,但是真正能用的到底有几个?你自己说! 无非是一些英文版的,但是国外的模板理念和国内的很不一样,英文的讲究框架合理,韩国的讲究视觉美,国内的刚好是二者的综合体。 现在模板界有...
盒子模型概述--div标记 div标记 01 div标记 (1)<div>标记是一个块容器标记。可定义文档中的分区或节(division/section)。...在style标签中,样式设计可以通过以下几种方法来写: 1.通过引用id来设置样式,
JS隐藏和显示div的方式有两种: 方式1:隐藏后释放占用的页面空间 通过设置display属性可以使div隐藏后释放占用的页面空间. style=”display: none;” document.getElementById(“demo”).style.display=”none”;/...
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?... 相关教程:div水平居中的N种方法 一、单行垂直居中 如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要
今天整理了一下用css防止边距重叠的几种方法 先假设一组dom结构 <div class=parent> <div class=child> </div> </div> 通常情况下,如果给子元素设置margin,就会产生这个属性对父元素也产生了同样的效果,然而 这...
提供几种漂亮的DIV渐变方式,省了渐变的烦恼.