Question

我有一行使用四个图像，但我想要另一行，但它像这样重叠

这就是我想要实现的目标

的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>

的main.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。感谢

Answer 1

这里的问题实际上并不是由于您float上的.imgContainer，但这些症状一开始可能会产生误导。

您实际看到的行为实际上是因为您将position:absolute放在了所有.imgContainer img元素上，这意味着它们已从文档流中删除而不是完全影响他们父母的身高。（容器没有降到0高度的原因是因为每个<p>中的.imgContainer仍占用空间。）因此，图像相互重叠，因为它们的父母比它们。

我建议只将position:absolute应用于顶部显示的图像（而不是顶部和底部），并将position:absolute应用于<p>，以便它可以位于图像顶部（并且在图像正确定位后，不会在图像行之间结束）。

所以我要添加/重写的CSS声明块是：

.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。

Answer 2

我不确定你的代码为什么会给你这个结果，它可能与你的图像绝对位置有关。但我在下面制作了一个小片段，可以满足您的需求。我没有使用img标签，而是创建了一个像图像容器一样的div，并为该div提供了图像的背景图像。我发现它总是使代码更简单。当您查看代码时，请在整页中查看它，以便您可以更清楚地看到它。

希望这有帮助！

＆＃13;

.imgContainer{
  width:100%;
  background-color: red;
  margin-left: 10px;
 }
.imgBOX{
  height:350px;
  width:350px;
  background-image: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/black-and-white-wallpaper-5.jpg);
  background-size: 100% 100%;
  display: inline-block;
  float: left;
 }
.imgBOX2{
  height:350px;
  width:350px;
  background-image: url(https://newevolutiondesigns.com/images/freebies/black-white-background-32.jpg);
  background-size: 100% 100%;
  display: inline-block;
  float: left;
 }

＆＃13;

<div class='imgContainer'>
  <div class='imgBOX'></div>
  <div class='imgBOX'></div>
  <div class='imgBOX'></div>
  <div class='imgBOX'></div>
</div>
<div class='imgContainer'>
  <div class='imgBOX2'></div>
  <div class='imgBOX2'></div>
  <div class='imgBOX2'></div>
  <div class='imgBOX2'></div>
</div>

＆＃13;

html / css图像重叠彼此

2 个答案: