新闻中心 网络推广 网站建设 优化推广

网站开发之前端:子div无法撑开父亲DIV

时间:2019-08-30   来源:本站

原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。

以下是几种解决办法(假设父div的class为“container”):

方法1、使用伪类

container::after{    display: block;    height:0;    content: '';    clear: both;
}container{    display: inline-block; /*弟一种撑开办法,底下会有部分被遮到,所以添加这行,就玩美了*/}

方法2、不撑开的原理是overflow不可见,所以给父div添加overflow:auto;就行,IE要用_height:1%;

container{    overflow: auto;/*让主要内容区随内容自动撑开*/
    overflow-y:hidden;/*把出现的滚动条隐藏,但是底下会被遮到一点,不玩美*/
     _height:1%;/*对IE的hack*/
}
  • 方法3、可以专门醉后添加一个子div用来清除浮动:

  • <div class="clear"></div>

    设置样式.

  • clear{clear:both; font-size:0; height:1%;}
  • 方法4、可以设置父div的高度(也就是手动撑开,不灵活);

  • 方法5、直接给父div设置 display: inline-block; 这样也自动撑开

  • 方法6、直接给子div设置 display: inline-block; 也能自动撑开,但是排版问题有待研究学习

  • 方法7、从网上还发现了一种方法,给父div增加属性:display:table;

  • 方法8、 子div浮动我就套不住你?OK,我让父div也浮动: 父div设置 float: left; 也可以


上一篇:没有了!
新闻推荐
罗湖网站外包价格
罗湖网站外包价格

罗湖网站外包价格复古风格随着时代的变迁,每个人的生活越来越时尚和便捷,一些生活在新兴城市的人们始终保...

龙华响应式网站制作多少钱
龙华响应式网站制作多少钱

龙华响应式网站制作多少钱比方说如今站,其盈利模式就有很多种,国外在这方面的经验比较丰富,一般可以分为...

南山网页设计多少钱
南山网页设计多少钱

南山网页设计多少钱站中都扮演着重要的角色,页人员设计和。人员需要的另一个关键技能是数据管理。的所有数...

松岗手机网站建设品牌
松岗手机网站建设品牌

松岗手机网站建设品牌怎么。初次做的朋友或许不好像都思考这个问题,想一想好像要做的事情很多,但不知从何...

Top