css - 在页面上垂直堆叠灵活的宽度/高度图像

Question

因此，在尝试了所有方法 30 分钟之后，我似乎无法让这两个 div 以内联方式紧挨着放置。我肯定错过了什么。

.shirt-box 框中的两个图像是一个简单的 jquery 淡入淡出到颜色过渡。但是这两个 div 不会坐在一起。这是用于当视口(viewport)低于 1100 像素时的响应式布局。所以我使用百分比...

HTML 代码:

<div class="shirtbar">
    <div class="shirt-box">
        <a href="#"><img class="before" src="img/shirts/shirt1-overlay.jpg" /></a>
        <a href="#"><img class="after" src="img/shirts/shirt1.jpg" /></a>
    </div><!-- shirt-box -->
    <div class="shirt-box">
        <a href="#"><img class="before" src="img/shirts/shirt1-overlay.jpg" /></a>
        <a href="#"><img class="after" src="img/shirts/shirt1.jpg" /></a>
    </div><!-- shirt-box -->
</div><!-- shirtbar --> 

还有 CSS:

.shirtbar {
    width: 100%;
    height: auto;
    border-top: 1px solid #000;
}
.shirt-box {
    position: relative;
    width: 50%;
    height: auto;
}
.shirt-box img {
    max-width: 100%;
    height: 100%;
    float: left;
}
.shirt-box img.before {
    height: 309px;
    width: 215px;
    position: absolute;
    z-index: 10;
}
.shirt-box img.after {
    height: 309px;
    width: 215px;
    position: absolute;
}

Answer 1

完全修改后的答案

我从你的问题中假设你想要 before 和 after 由 z-index 一个在另一个之上“堆叠”。但看起来您确实希望它们垂直堆叠在页面上。这甚至不需要绝对定位(除非您出于其他原因需要它们)。

Here is the new answer .

HTML

<div class="shirtbar">
    <div class="shirt-box">
        <a href="#" class="before"><img  src="http://dummyimage.com/215x309/000/fff.png&text=Scaling+image" /></a>
        <a href="#" class="after"><img  src="http://dummyimage.com/215x309/f00/fff.png&text=Scaling+image" /></a>
    </div><!-- shirt-box -->
    <div class="shirt-box">
        <a href="#" class="before"><img  src="http://dummyimage.com/215x309/0f0/fff.png&text=Scaling+image" /></a>
        <a href="#" class="after"><img  src="http://dummyimage.com/215x309/00f/fff.png&text=Scaling+image" /></a>
    </div><!-- shirt-box -->
</div><!-- shirtbar -->

CSS

.shirtbar {
    width: 100%;
    border-top: 1px solid #000;
    /* uncomment below if you want 
       shirtbar to actually visually wrap shirt-box */
    /* overflow: auto; */
}
.shirt-box {
    width: 50%;
    float: left;
}
.shirt-box a {
    display: block;
    width: 100%;
    line-height: 0;
    text-decoration: none;    
}

.shirt-box img {
    height: auto;
    width: 100%;
}