Question

我已经查看了类似的问题，并试图删除位置属性，但不幸的是不起作用。

我有一个内部有2个div的容器，这两个div每个都包含一个图像。图像显示正确，但整个容器的高度为0px。以下是打开开发人员控制台的图片：https://gyazo.com/277d635619eb80d2d3f63a1c28c80314 这是在尝试使图像响应宽度：100％后发生的;和身高：自动;

    #landing-images {
        width: 100%;
        height: auto;
        margin-top: 10%;
        margin-bottom: 5%;
        border: solid 2px black;
    }
    
    .leftLanding {
        /*position: relative;*/
        width: 80%;
        float: left;
    }
    
    .rightLanding {
        /*position: relative;*/
        width: 80%;
        float: right;
    }
    
    .landingImage {
        width: 100%;
        height: auto;
    }

 <div id="landing-images">
     <div class="leftLanding">
         <img class="landingImage" src="http://www.hlgjyl888.com/data/wallpapers/57/WDF_1035782.png">
     </div>
     <div class="rightLanding">
         <img class="landingImage" src="http://www.hlgjyl888.com/data/wallpapers/57/WDF_1035782.png">
     </div>
 </div>

Answer 1

你只需要添加。

overflow:auto;至#landing-images。

所以，你的CSS 就像，

#landing-images {
    width: 100%;
    height: auto;
    overflow:auto;
    margin-top: 10%;
    margin-bottom: 5%;
    border: solid 2px black;
}

因为浮动子元素会将其从文档流中删除，而父元素将会折叠。通过添加溢出规则，可以恢复所需的行为。

Answer 2

问题是浮动属性，请改用display：block和margin。

＆＃13;

#landing-images {
    width: 100%;
    height: auto;
    margin-top: 10%;
    margin-bottom: 5%;
    border: solid 2px black;
    position:relative;
}

.leftLanding {
    position: relative;
    width: 80%;
    display:block;
    margin-right:auto;
}

.rightLanding {
    position: relative;
    width: 80%;
    margin-left:auto;
}

.landingImage {
    width: 100%;
    height: auto;
}

＆＃13;

<div id="landing-images">
     <div class="leftLanding">
         <img class="landingImage" src="http://cdn.playbuzz.com/cdn/d2b06305-f201-4127-8eb7-7410bcc0de02/2d6c2415-2b8c-430c-87a4-c516409d8488.jpg">
     </div>
     <div class="rightLanding">
         <img class="landingImage" src="http://www.nationalgeographic.com/content/dam/animals/pictures/mammals/g/gray-wolf/gray-wolf_01.ngsversion.1484679603276.JPG">
     </div>
 </div>

＆＃13;

Answer 3

只要内部有浮动元素，您就必须清除包装。

    #landing-images {
        width: 100%;
        height: auto;
        margin-top: 10%;
        margin-bottom: 5%;
        border: solid 2px black;
    }
    
    .leftLanding {
        /*position: relative;*/
        width: 80%;
        float: left;
    }
    
    .rightLanding {
        /*position: relative;*/
        width: 80%;
        float: right;
    }
    
    .landingImage {
        width: 100%;
        height: auto;
    }
    .clearfix::after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
    }

 <div id="landing-images" class="clearfix">
     <div class="leftLanding">
         <img class="landingImage" src="http://www.hlgjyl888.com/data/wallpapers/57/WDF_1035782.png">
     </div>
     <div class="rightLanding">
         <img class="landingImage" src="http://www.hlgjyl888.com/data/wallpapers/57/WDF_1035782.png">
     </div>
 </div>

我总是使用具有以下样式的标准clearfix类：

    .clearfix::after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
    }

所以，总是在你的全局CSS上有这样一个类。并将此类添加到所有包含浮动元素的包装器中。

在以下网址阅读有关clearfix概念的更多信息：

https://css-tricks.com/snippets/css/clear-fix/

Div高度为0px，但里面有图像？

3 个答案: