CSS：将图像定位在右下角

Question

我有这样一张图片，需要将其放置在 div 的右下角。

我尝试在 img 标签上使用 margin-right 和 padding-right 0px，但这并不起作用。 黑线表示我不需要那个空间。

这是一个 CodePen：

https://codepen.io/ogonzales/pen/OrZKOr

<header class="header" id="header1">
    <img class="margin_right_zero" src="https://raw.githubusercontent.com/alphadsy/alpha-ui/master/images/man.png" width="440px" height="320px">
    <div class="circle">
        <div class="caption">
            <h2 class="title display-3">Alphad <strong>Design & Inpsertion</strong></h2>
            <p>Lorem m nisi! Eum vitae ipsam veniam, ullam explicabo quaerat asperiores veritatis nam reprehenderit necessitatibus sequi.</p>
        </div>
    </div>
</header>

更新1：

大多数答案解决了底部边距，但没有解决右侧边距。

您必须在全屏模式下打开CodePen才能看到这个细节。

- Omar Gonzales

---

当前你的图片有left: 50%，而不是这个，请使用right: 0; bottom: 0; - Huangism

Answer 1

您可以通过以下方式实现这一点：

#header1 img {
    position: absolute;
    right: -10px;
    bottom: 0;
}

请注意，-10px是用来偏移图像中的空白间隙的。 https://codepen.io/anon/pen/PXeMgv

- Josh Adams

---

请查看更新1。 - Omar Gonzales

嗨 @OmarGonzales，你能发一下你的代码笔吗？我链接的那个，我在更新1中没有看到你的问题。或者你用的是哪个浏览器？ - Josh Adams

刚刚使用了你的CodePen链接，进行了分支并在全屏模式下查看： https://codepen.io/ogonzales/full/QzxLOd - Omar Gonzales

右下角有一个小缺口，不应该出现在那里。 - Omar Gonzales

@OmarGonzales 已修复 :) - Josh Adams

Answer 2

这可以很容易地使用CSS中的absolute定位实现。只需在您的CSS中添加以下内容即可。

.bottom_right{
  position:absolute;
  bottom:0;
  right:0;
}

并将您的图像类更改为bottom_right

请记住，每个“absolute”元素的容器都需要将其位置设置为relative。因此，请将此添加到您的CSS中，以确保图像永远不会离开其容器。

header{ position:relative; }

这是您的 CodePen 更新链接: https://codepen.io/anon/pen/JwvgzM

- Alan Leyva

---

谢谢。但这解决了底部的部分，而不是右侧的部分。请查看更新1。 - Omar Gonzales

Answer 3

这是因为您的图像使用了position: absolute;。图像的位置主要由top、right、bottom和left定义。由于您已经包含了left: 50%，它不会“听取”您的边距和填充设置。

设置以下内容将把您的图像设置为右下角：

#header1 img {
  position: absolute;
  right:0;
  bottom: 0;
}

希望这有所帮助！

- jelleklaver

Answer 4

希望这能帮到你：

.bottomright {
  top: unset;
  left: unset;
  position: absolute;
  bottom: 0;
  right: 0;
}

- object-Object

Answer 5

这在全屏下有效：

.margin_right_zero { 
  bottom: 0;
  margin-left: 24%;
}

我认为在那之后你只需要调整响应性的百分比值，如果你希望图片在平板电脑或手机上显示。

- Senrab

Answer 6

或者将图像移动到HTML代码的末尾，这样可以简化工作 :-)

<header class="header" id="header1">
    <div class="circle">
        <div class="caption">
            <h2 class="title display-3">Alphad <strong>Design & Inpsertion</strong></h2>
            <p>Lorem m nisi! Eum vitae ipsam veniam, ullam explicabo quaerat asperiores veritatis nam reprehenderit necessitatibus sequi.</p>
        </div>
        <img class="margin_right_zero" src="https://raw.githubusercontent.com/alphadsy/alpha-ui/master/images/man.png" width="440px" height="320px">
    </div>
</header>

- Kramer