如何在所有分辨率下对齐横幅左下角的按钮？答案

【问题标题】：How to align buttons at the bottom left of a banner in all resolutions?如何在所有分辨率下对齐横幅左下角的按钮？
【发布时间】：2022-01-24 14:29:57
【问题描述】：

我正在尝试对齐横幅左下角的按钮。我尝试了一个示例代码，但每次分辨率更改时它都会错位。

在这里尝试了html代码，

<div class="row">
            <div class="col-sm-12 header" style="background-image: url(https://i.pinimg.com/originals/1b/90/7c/1b907cad177181b12cea64203dcb7623.jpg); background-repeat: no-repeat; background-size: 100% 100%;">
                <div class="row">
                    <div class="col-sm-9"></div>
                    <div class="col-sm-3" style="margin-top: 12%">          
                          
                        <div class="row " style="margin-top: 46%; margin-left: 254px !important;">
                            <button class="btn btn-primary">Button1</button>
                        </div>
                        <div class="row " style="margin-top: -7%; margin-left: 367px !important;">                              
                             <button class="btn btn-success">Button2</button>                               
                        </div>
                    </div>
                </div>
        </div>

Fiddle

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

.header {
  background-image: url(https://i.pinimg.com/originals/1b/90/7c/1b907cad177181b12cea64203dcb7623.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  height: 10rem;
  object-fit: scale-down;
}

.btn {
  margin-top: 8.5rem;
  margin-left: 0.5rem;
 }

<div class="row">
  <div class="col-sm-12 header">
    <div class="column">
      <button
        class="btn btn-primary">
        Button1
      </button>        
      <button class="btn btn-success">
        Button2
      </button>                               
    </div>
  </div>
</div>

对于您的背景缩放，请查看此链接：https://www.w3schools.com/css/css3_object-fit.asp

或者您可以尝试使用 flex 进行布局：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

【解决方案2】：

这是一种根据现有代码在横幅左下角根据需要放置按钮的方法：

<html>
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>

  <body>
    <div>
      <div
        class="col-sm-12 header"
        style="
          background-image: url(https://i.pinimg.com/originals/1b/90/7c/1b907cad177181b12cea64203dcb7623.jpg);
          background-repeat: no-repeat;
          background-size: 100% 100%;
        "
      >
        <div class="row">
          <div class="" style="margin-top: 12%"></div>
          <div class="" style="display: flex; align-items: flex-end">
            <div>
              <button class="btn btn-primary">Button1</button>
            </div>
            <div>
              <button class="btn btn-success">Button2</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

要将按钮定位在右下角，您需要将justify-content: flex-end; 添加到包装div

【讨论】：