子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>

显示结果:

112317_w6RA_2829989.png

解决方法:

(一):加<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>

显示结果:

112449_YVL3_2829989.png

分析:

父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>

显示结果:

112449_YVL3_2829989.png

分析:

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>

显示结果:

112449_YVL3_2829989.png

(四)父容器增加一个属性: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>

显示结果:

112449_YVL3_2829989.png

转载于:https://my.oschina.net/jingyao/blog/777252

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值