html - 将无序列表中的图像堆叠在一起。

Question

提前感谢你们提供的任何见解。我没有找到我需要的确切答案。

I have two rows of images but want one atop the other

我试过这个: Display list items on top of each other

但它似乎并没有解决我的问题。

这是我的 HTML/CSS:

 <ul class="north-showcase">
                <li>
                    <figure class="before">
                        <img src="resources/img/170Northwoods/Bath.jpg" alt="Bathroom">
                    </figure>
                    <figure class="after">
                        <img src="resources/img/170Northwoods/WholeHouse.jpg" alt="Bathroom">
                    </figure>
                </li>
                <li>
                    <figure class="before">
                        <img src="resources/img/170Northwoods/Bath2.jpg" alt="Second Bathroom">
                    </figure>
                    <figure class="after">
                        <img src="resources/img/170Northwoods/Kitchen.jpg" alt="Second Bathroom">
                    </figure>
                </li>
                <li>
                    <figure class="before">
                        <img src="resources/img/170Northwoods/Kitchen.jpg" alt="">
                    </figure>
                    <figure class="after">
                        <img src="resources/img/170Northwoods/Bath2.jpg" alt="">
                    </figure>
                </li>
                <li>
                    <figure class="before">
                        <img src="resources/img/170Northwoods/WholeHouse.jpg" alt="">
                    </figure>
                    <figure class="after">
                        <img src="resources/img/170Northwoods/Bath.jpg" alt="">
                    </figure>
                </li>


            </ul>

这是我的 CSS:

.north-showcase {
list-style: none;
width: 100%;

}

.north-showcase li {
display: block;
float: left;
width: 25%;    
}

.before {
width: 100%;
margin: 0%;
z-index: 1;

}

.before img {
width: 100%;
height: auto;


}

.after {
width: 100%;
margin: 0%;
z-index: 2;

}

.after img {
width: 100%;
height: auto;


}

Answer 1

首先，创建一个 .img-wrapper div 包含每个列表项的顶部和底部图片

<li>
  <div class="img-wrapper">
    <figure class="before">
      <img src="resources/img/170Northwoods/Bath.jpg" alt="Bathroom">
    </figure>
    <figure class="after">
      <img src="resources/img/170Northwoods/WholeHouse.jpg" alt="Bathroom">
    </figure>
  </div>
</li>

CSS:

.img-wrapper {
  position: relative;
}
.after, .before {
  position: absolute;
}
.north-showcase li {
  display: inline-block;
  width: 24%;
}

工作演示:https://jsfiddle.net/kkdaily/6cwh3rkL/

注意:display: inline-block属性导致列表项之间出现额外的间距。对此有一些棘手的解决方案，包括删除结尾 </li>标签。更多信息在这里:https://css-tricks.com/fighting-the-space-between-inline-block-elements/