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才能看到此详细信息。

Answer 1

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

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

请注意-10px，是为了补偿图像中的空白。

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

Answer 2

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

设置以下内容会将图像设置在右下角：

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

希望这会有所帮助！

Answer 3

这可以很容易地通过在CSS中放置absolute来实现。 只需将其添加到您的CSS

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

然后将图像上的类更改为bottom_right

请记住，每个“绝对”元素的容器都必须位于relative位置 因此，请将其添加到CSS中，以确保图像永远不会离开容器

header{ position:relative; }

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

Answer 4

或将图像移到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>

Answer 5

希望这会有所帮助：

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

Answer 6

这在全屏模式下起作用：

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

我认为，如果您希望图片出现在平板电脑或移动设备上，那么您要做的就是调整％响应度。