如何将下载按钮直接放置在右侧图像下方

Question

我一直在努力开发一个网站，该网站的特点是标题和正文中的图像。但是，当我尝试将下载按钮直接放置在右侧图像下方时，我遇到了一些问题。 如果你想查看我的代码，它位于我的 github 上！

https://github.com/moseskbalunywa/Stackoverflow

我尝试了这个解决方案：

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-wrapper {
  position: relative;
}

#downloadButton {
  position: absolute;
  bottom: 10px;
  background-color: #9C78E4;
  color: #ffffff;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#downloadButton:hover {
  background-color: #584089;
}

<div class="img-container">
  <div class="image-wrapper">
    <img id="plattegrond" src="images/plattegrond.jpg" class="center" />
    <button id="downloadButton">Download</button>
  </div>
</div>

尽管预计下载按钮会出现在右侧图像的正下方，但它出乎意料地位于图像下方的中心。

我尝试了另一种解决方案：

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.image-wrapper {
  position: relative;
  text-align: center;
}

#plattegrond {
  width: 50%;
}

#downloadButton {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: #9C78E4;
  color: #ffffff;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#downloadButton:hover {
  background-color: #584089;
}

<div class="img-container">
  <div class="image-wrapper">
    <img id="plattegrond" src="images/plattegrond.jpg" class="center" />
    <button id="downloadButton">Download</button>
  </div>
</div>

在这次尝试中，我调整了图像的宽度，并为下载按钮添加了右边距。然而，图像变得太大，覆盖了大约 95% 的网页。

所以我尝试了最后一个解决方案：

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.image-wrapper {
  text-align: center;
  position: relative;
}

#plattegrond {
  max-width: 100%;
  height: auto;
}

#downloadButton {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: #9C78E4;
  color: #ffffff;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#downloadButton:hover {
  background-color: #584089;
}

在尝试不同的解决方案时，图像尺寸减小了，但比预期的要小一些。

在整个过程中，我寻求 ChatGPT 的指导，考虑各种策略来实现预期结果。

来源：ChatGPT

Answer 1

你可以这样做。

.image-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}

<div class="image-wrapper">
  <img src="http://placekitten.com/g/200/150" />
  <button>Download</button>
</div>