如何将按钮与横幅右下角与所有分辨率更改对齐答案

【问题标题】：How to align buttons with banner bottom right corner with all resolution changes如何将按钮与横幅右下角与所有分辨率更改对齐
【发布时间】：2022-01-24 23:24:31
【问题描述】：

如何将按钮与横幅右上角与所有分辨率更改对齐。我添加了下面的代码，但如果我们更改分辨率按钮未对齐到屏幕的顶部或底部。能否请您帮助我如何在所有分辨率下保持相同的位置（右下角）。

这里是html代码：

.button1 {
    background-color: #e442d0;
    border: none;
    color: white;
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 7px 12px;
    cursor: pointer;
    font-weight: 500;
    border-radius: 0px;
}

.button2 {
    background-color: #9c50d6;
    border: none;
    color: white;
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 7px 4px;
    cursor: pointer;
    font-weight: 500;
    border-radius: 0px;
}
.header {
    height: 500px;
}

<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>
      <style>

      </style>
   </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: 23%"></div>
               <div class="" style="display: flex; justify-content: flex-end;">
                  <div>
                     <button class="btn btn-primary button1">Button1</button>
                  </div>
                  <div>
                     <button class="btn btn-success button2">Button2</button>
                  </div>
               </div>
            </div>
          </div>
      </div>
   </body>
</html>

【问题讨论】：

标签： javascript html jquery css responsive-design

【解决方案1】：

如果您在所有分辨率下都需要它们位于右下角，absolute 定位将是比制作 flex 更好的选择。

你的代码变成：

.button1 {
    background-color: #e442d0;
    border: none;
    color: white;
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 7px 12px;
    cursor: pointer;
    font-weight: 500;
    border-radius: 0px;
    position: absolute;
    bottom: 16px;
    right: 96px;
}

.button2 {
    background-color: #9c50d6;
    border: none;
    color: white;
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 7px 4px;
    cursor: pointer;
    font-weight: 500;
    border-radius: 0px;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.header {
    height: 500px;
    position: relative;
}

<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>
      <style>

      </style>
   </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>
                <button class="btn btn-primary button1">Button1</button>
                <button class="btn btn-success button2">Button2</button>
            </div>
          </div>
      </div>
   </body>
</html>

【讨论】：