Cómo alinear el botón con la esquina superior derecha del banner con todos los cambios de resolución. Agregué el código a continuación, pero si cambiamos las resoluciones, los botones están desalineados en la parte superior o inferior de la pantalla. ¿Podría ayudarme a mantener la misma posición (esquina inferior derecha) con todas las resoluciones?
Aquí está el código 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>Si los necesita en la esquina inferior derecha en todas las resoluciones, el posicionamiento absolute será una mejor opción que hacer un flex.
Su código se convierte en:
.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>