javascript - div的高度没有扩展

Question

HTML

<div id = "four">
    <div id = "photos">
         <ul>
            <li onclick="preview('pic1')" id = "pic1">
                  <img src = "img.png">
            </li>

         </ul>
    </div>
</div>

CSS

#four
{
    width: 100%;
    overflow: hidden;
    background: rgb(213,213,119);
}

#photos{
position: relative;
width: 100%;
display: block;
top: 0;
 }
 #photos ul li{
 position: relative;
 top: 0;
 left: 0;
 float: left;
 width: 18vw;
 height: 18vw;
 margin: 1.03vw;
 overflow: hidden;
 background: black;
 }

 #photos ul li > img{
position: relative;
bottom: 10px;
/*-webkit-background-size: cover center center; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover center center;*/
width: 140%;
}

出于某种原因，它们显示为完全位于 0 像素高度上#four #photos ul。就像我不能改变背景和/或隐藏的溢出。不确定发生了什么。

Answer 1

使用重置 css 并为 ul 提供 clearfix。

这应该可以解决您的#four #photos ul 高度为 0px 的问题。

HTML

<ul class="clearfix">

CSS

    /*limited reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video {
    margin: 0;
    padding: 0;
    border: 0;
}

DEMO