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%;
}

出于某种原因，他们显示出他们都完全位于0px高度#four #photos ul。就像我无法改变背景和/或隐藏的溢出。不确定是什么。

Answer 1

使用reset 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

div的高度不会扩大

1 个答案: