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属性导致列表项之间出现额外的间距。有一些hacky解决方案，包括删除结束</li>标记。更多信息：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

将图像堆叠在无序列表中。

1 个答案: