CSS：将图像定位在右下角

Question

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

我试过在 img 标签上使用 margin-right 和 padding-right 0px 但这不起作用。

黑线意味着我不需要那个空间

这是一个代码笔：

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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以通过以下方式实现：

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

注意-10px，是为了抵消图像中的空白。

https://codepen.io/anon/pen/PXeMgv

原文由 Josh Adams 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这可以通过 absolute 在 css 中定位轻松实现。只需将此添加到您的 css

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

并将图像上的类更改为 bottom_right

请记住，每个“绝对”元素的容器都需要有其位置 relative 因此，将此添加到您的 css 以确保图像永远不会离开其容器

header{ position:relative; }

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

原文由 Alan Leyva 发布，翻译遵循 CC BY-SA 4.0 许可协议