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。就像我不能改变背景和/或隐藏的溢出。不确定发生了什么。
最佳答案
使用重置 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;
}
关于javascript - div的高度没有扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25336883/