Html 如何相应地缩小两个文件之间的空白<；部门>'；s

根据屏幕大小，图像和博客标题之间的空白增加/减少：

我怎样才能让他们一直接触

HTML

<img class="main-image" src="/assets/walking.jpg">
<div class="overlay-image">
  <div class="blog-caption">
    A DAILY BLOG ABOUT THE
    JOURNEY & CHALLENGES
  </div>
  <%= render 'subscribes/subscribe.html.erb' %>
</div>

<div class="blog-page">
  Blog post title & text.
</div>

---

是的，正如您已经怀疑的那样：首先从

.overlay image

中删除负边距。然后将

position:absolute

添加到

.blog caption

中，并使用

top

和

left

设置调整其位置

也许你应该看看。 然后，您可以将图像放入类中的花式文本容器中。覆盖图像还没有。

---

有了这个，你就摆脱了-x%的利润。也许这可以帮助您解决问题。

我会将图像作为容器的背景，而不是试图将下面的div向上拉以覆盖它。首先：请准备工作JSFIDLE（或类似内容），然后添加您使用的css框架的信息。我确实试过你的代码，但它看起来和你的截图都不一样。第二：正确调整边距，记住换行。如果您准备好JSFIDLE，我将用注释修复您的代码，说明更改的内容和原因。

main-image {
  width: 100%;
  position: relative;
}

.overlay-image {
  position: relative;
  text-align: center;
  margin-top: -47%; # I think this is the main culprit, but I don't know how to edit without altering the position of the things on the image
  height: 201px;
}

.blog-caption {
  text-align: center;
  font-size: 18px;
  color: white;
  margin-top: 0px;
  margin-bottom: 18px;
  padding-top: 8px;
  background-color: rgba(44,62,80, 0.8);
  padding-bottom: 8px;
}

.blog-page {
  @media (max-width: 992px) {
    padding-top: 0px;
    margin-top: -40px;
  }
}