zoukankan      html  css  js  c++  java
  • 关于撑开父容器高度的小探讨

    我们知道,当子元素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的时候呢,这时,连它自己都显示不出来了,之前一直没有遇到过这个问题,后来查阅资料,加上自己探索,发现只能手动设置父元素的宽高,所以在这里,与其说是分享,倒不如说是自己的一个小笔记吧~!好记性不如烂笔头嘛。

  • 相关阅读:
    OpenCV2.4.4 图像旋转和缩放
    Python+OpenCV:图片无损旋转90°且无黑边的处理方法
    python 怎样去除图片中的多余物体
    goland 无法解析符号
    go mod init 报错
    比较有用的
    Gorm 学习笔记
    Gorm 更新 0 值
    Java Lambda 表达式,Java Lambda 函数接口
    Java 单例模式,Java Singleton单例模式
  • 原文地址:https://www.cnblogs.com/danielweb/p/4868586.html
Copyright © 2011-2022 走看看