如何将链接对齐到右下角？答案

【问题标题】：How can I align a link to the bottom right?如何将链接对齐到右下角？
【发布时间】：2021-11-08 10:26:54
【问题描述】：

我想将此链接对齐到右下角。我已经尝试添加下面的 CSS，但它只在容器中对齐。我希望它在英雄区域中对齐。

.rt {
  position: absolute;
  right: 0px;
  bottom: 0px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="hero-area hero-style-03 christian-hero-bg">
  <div class="container">
    <div class="row">
      <div class="col-lg-5 col-md-7 ml-auto">
        <div class="hero-content text-left">
          <h2 class="text-black">Text1 </h2>
          <div class="ht-btn-area section-space--mt_40 rt">
            <a href="#" class="hero-btn">x</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

请检查以下内容，因为我已将容器更改为 container-fluid，因为您希望它位于 hero-area 下。

  a.hero-btn {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: 18px;
}

<div class="hero-area hero-style-03 christian-hero-bg">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-5 col-md-7 ml-auto">
                        <div class="hero-content text-left">
                            <h2 class="text-black">Text1 </h2>
                            
<div class="ht-btn-area section-space--mt_40 rt">
                                <a href="#" class="hero-btn">x</a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

【讨论】：

试过了，还是根据容器对齐，Bootstrap是v4.4.1

【解决方案2】：

将 Bootstrap 的 position:relative 类、position-relative 添加到你的英雄类：

.rt
{
  position:absolute;
  right:0px;
  bottom:0px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="position-relative hero-area hero-style-03 christian-hero-bg">
    <div class="container">
        <div class="row">
            <div class="col-lg-5 col-md-7 ml-auto">
                <div class="hero-content text-left">
                    <h2 class="text-black">Text1 </h2>
                    <div class="ht-btn-area section-space--mt_40 rt">
                        <a href="#" class="hero-btn">x</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

绝对定位的元素是相对于它们最近的定位（非静态）祖先定位的，因此在 hero 上设置 position: relative 会使 x 相对于它而不是 body 移动。

【讨论】：

不起作用。请通过预览代码sn-p检查一下
@AmongUS 它怎么不工作？看看结果。 X 位于 hero div 的右下角。
我希望它在<div class="position-relative hero-area hero-style-03 christian-hero-bg">div的右下角对齐
@AmongUS 是的。使用浏览器工具检查文档，您会看到

【解决方案3】：

你的主 div 位置在左上角，用于解决这个问题，你最常给你的主 div 提供 rt 类。示例

.rt
{
  position:absolute;
  right:0px;
  bottom:0px;
}

<div class="hero-area hero-style-03 christian-hero-bg rt">
...
</div>

或者你最把所有的页面空间给 div

【讨论】：