Question

所以，经过30分钟尝试一切，我似乎无法让这两个div直接坐在彼此旁边。我肯定会遗漏一些东西。

.shirt-box框中的两个图像是一个简单的jquery淡入到颜色过渡。但这两个div不会坐在一起。当视口下降到1100px以下时，这是用于重新布局的布局。所以我正在使用百分比...

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%;
}

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

1 个答案:

完全改版的答案