我有一行有四个图像，但我想要另一行，但它们像这样相互重叠
这就是我想要的
index.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="CSS/main.css">
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="main_image"></div>
<div class="image123">
<div class="imgContainer">
<img class="bottom" src="Image/test_image_slot.jpg"/>
<img class="top" src="Image/light_bokeh_edit.jpg"/>
<p>This is image 1</p>
</div>
<div class="imgContainer">
<img class="bottom" src="Image/test_image_slot.jpg"/>
<img class="top" src="Image/dancing.jpg"/>
<p>This is image 2</p>
</div>
<div class="imgContainer">
<img class="bottom" src="Image/test_image_slot.jpg"/>
<img class="top" src="Image/applecloud.jpg"/>
<p>This is image 3</p>
</div>
<div class="imgContainer">
<img class="bottom" src="Image/test_image_slot.jpg"/>
<img class="top" src="Image/chair.jpg">
<p>This is image 4</p>
</div>
</div>
<div class="image123">
<div class="imgContainer">
<img class="bottom" src="Image/test_image_slot.jpg"/>
<img class="top" src="Image/light_bokeh_edit.jpg"/>
<p>This is image 1</p>
</div>
<div class="imgContainer">
<img class="bottom" src="Image/test_image_slot.jpg"/>
<img class="top" src="Image/dancing.jpg"/>
<p>This is image 2</p>
</div>
<div class="imgContainer">
<img class="bottom" src="Image/test_image_slot.jpg"/>
<img class="top" src="Image/applecloud.jpg"/>
<p>This is image 3</p>
</div>
<div class="imgContainer">
<img class="bottom" src="Image/test_image_slot.jpg"/>
<img class="top" src="Image/chair.jpg">
<p>This is image 4</p>
</div>
</div>
</body>
主.css
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #360836;
text-align:center;
}
li {
display:inline;
}
li a {
display: inline-block;
color: #d14977;
text-align: center;
padding: 14px 16px;
text-decoration: none;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
li a:hover {
color: white;
}
div.main_image {
content:url(../Image/everest.jpg);
max-width: 100%;
height: auto;
width: auto\9;
}
.imgContainer{
float:left;
width:25%;
position:relative;
margin:0 auto;
}
.imgContainer img{
max-width:100%;
height: auto;
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.imgContainer img.top:hover {
opacity:0;
}
我怎样才能让两行甚至两行以上的图像堆叠起来不重叠。我只想使用 css 和 html 来实现这一点，我不想使用 javascript 或 jquery。谢谢
最佳答案
这里的问题实际上不是由于 float 引起的在你的 .imgContainer ，尽管这些症状起初可能会产生误导。
您看到的行为实际上是因为您放置了 position:absolute在你所有的.imgContainer img元素，这意味着它们被排除在文档流之外并且根本不会影响其父元素的高度。 (容器没有降到 0 高度的原因是因为每个 <p> 中的 .imgContainer 仍然占用空间。)结果，图像相互重叠，因为它们的父级比它们矮。
我建议只应用 position:absolute到出现在顶部(而不是顶部和底部)的图像，并且还应用 position:absolute到 <p>因此它可以位于图像上方(并且在图像正确定位后不会在图像行之间结束)。
所以我要添加/重写的 CSS 声明 block 是:
.imgContainer img{
/* position:absolute removed */
display:block
max-width:100%;
height: auto;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.imgContainer img.top {
position:absolute;
left:0;
top:0;
}
.imgContainer p {
position: absolute;
margin: 0;
/* So the element doesn't block hover event of image */
pointer-events: none;
/* Vertical centering */
top: 50%;
transform: translateY(-50%);
}
这是一个 JSFiddle展示。希望这可以帮助!如果您有任何问题，请告诉我。
编辑:通过应用 display:block 删除了图像行之间的垂直间距到子图像。来源于this StackOverflow question .
关于html/css 图片相互重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34207073/