Question

所以我试图让2张图像在彼此之上。 1需要总是在第2位。而且数字3总是它现在（我只是添加它）所以我知道那里有一些答案如何做坏我不知道如何应用它们。{{ 0}}

HTML
<div class="container">
        <div class="HOMElinks">
            <div class="HOMElinks-big">
                <img src="img/link-big.jpg" width="450" height="325">
            </div>
            <div class="HOMElinks-small">
                <img src="img/link_basic.jpg" width="250" height="150">
            </div>

            <div class="HOMElinks-small">
                <img src="img/link_basic.jpg" width="250" height="150">
            </div>


        </div>
    </div>
CSS
.HOMElinks {
    margin-top: 2.5%;
}

.HOMElinks-big {
    float: left;
}

.HOMElinks-small {
    float: right;
    margin-bottom: 2.5%;
}

Answer 1

你漂浮了.HOMElinks-small。默认情况下，如果他们有足够的空间，他们将排列在一起。解决这个问题的一个简单方法是将它们包装在一个容器中，然后浮动它。

上述方法的一个不幸的副作用是，与原始设计相比，它使margin-bottom: 2.5%的结果有所不同。这是因为顶部和底部边距（以及填充，就此而言）使用元素的宽度，而不是高度。解决这个问题的方法是使用视口单元。为了与屏幕的宽度保持一致，我使用了2.5vw，其中vw表示视口宽度。这转化为窗口宽度的2.5％。

在这里，我使用.HOMElinks-small-group作为容器，使用vw作为边距，并将图像更改为按百分比调整大小，以便您可以更轻松地看到效果。

.HOMElinks {
  margin-top: 2.5vw;
}
.HOMElinks-big {
  width: 45%;
  float: left;
}
.HOMElinks-small-group {
  width: 25%;
  float: right;
}
.HOMElinks-small {
  margin-bottom: 2.5vw;
}
img {
  width: 100%;
}

<div class="container">
  <div class="HOMElinks">
    <div class="HOMElinks-big">
      <img src="http://lorempixel.com/450/325">
    </div>
    <div class=HOMElinks-small-group>
      <div class="HOMElinks-small">
        <img src="http://lorempixel.com/250/150">
      </div>
      <div class="HOMElinks-small">
        <img src="http://lorempixel.com/250/150">
      </div>
    </div>
  </div>
</div>

这里也是codepen。

如何将2张图片叠加在一起

1 个答案: