码迷,mamicode.com
首页 > 其他好文 > 详细

关于撑开父容器高度的小探讨

时间:2015-10-11 00:19:08      阅读:281      评论:0      收藏:0      [点我收藏+]

标签:

我们知道,当子元素float的时候,虽然没有脱离文本流,但是也会使父元素坍缩,也就是父元素的高度或者宽度变为0,解决办法就是让父元素的overflow为hidden。

今天我遇到一个bug,如下代码所示:

<div class="wrap">
    <div class="main">
        <img src="../JS+CSS3实现带预览图幻灯片效果/images/1.jpg" height="500" width="1280" alt="">
    </div>
    </div>
.wrap{
            position: relative;
        }
        .main{
            position: absolute;
        }
        img{
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
        }

设置了img为absolute后,绝对定位如果父级不使用position:relative,而直接使用position:absolute绝对定位,这个时候将会以body标签为父级,使用position:absolute定义对象无论位于DIV多少层结构,都将会被拖出以<body>为父级(参考级)进行绝对定位。,但它是脱离文本流的,也就是无论如何,它都撑不开父容器了,而当父容器也是absolute的时候呢,这时,连它自己都显示不出来了,之前一直没有遇到过这个问题,后来查阅资料,加上自己探索,发现只能手动设置父元素的宽高,所以在这里,与其说是分享,倒不如说是自己的一个小笔记吧~!好记性不如烂笔头嘛。

关于撑开父容器高度的小探讨

标签:

原文地址:http://www.cnblogs.com/danielweb/p/4868586.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!