Pregunta Alinear el botón en la parte inferior de div usando CSS


Quiero alinear mi botón en la esquina inferior derecha de mi div. ¿Cómo puedo hacer eso?

enter image description here

Css de div actual:

    float: right;
    width: 83%;
    margin-right: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height:625px;
    overflow:auto;

75
2018-04-28 10:33


origen


Respuestas:


Puedes usar position:absolute; para posicionar absolutamente un elemento dentro de un div principal. Cuando usas position:absolute; el elemento se colocará completamente desde el div principal que se encuentra en la primera posición, si no puede encontrar uno, se posicionará completamente desde la ventana, por lo que deberá asegurarse de que se ubique el div de contenido.

Para hacer que el contenido div se ubique, todos position los valores que no son estáticos funcionarán, pero relative es el más fácil ya que no cambia el posicionamiento de los divs por sí mismo.

Entonces agrega position:relative; al contenido div, quite el flotador del botón y agregue el siguiente css al botón:

position: absolute;
right:    0;
bottom:   0;

147
2018-04-28 10:36



CSS3 flexbox también se puede usar para alinear el botón en la parte inferior del elemento principal.

HTML requerido:

<div class="container">
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>

CSS necesario:

.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}

Captura de pantalla:

Output Image

Recursos útiles:

* {box-sizing: border-box;}
body {
  background: linear-gradient(orange, yellow);
  font: 14px/18px Arial, sans-serif;
  margin: 0;
}
.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
  padding: 10px;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}
.container .btn-holder button {
  padding: 10px 25px;
  background: blue;
  font-size: 16px;
  border: none;
  color: #fff;
}
<div class="container">
  <p>Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... </p>
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>


14
2018-03-31 16:04



El contenedor principal debe tener esto:

position: relative;

El botón en sí tiene que tener esto:

position: relative;
bottom: 20px;
right: 20px;

o lo que quieras


6
2018-01-04 20:10



Va a la derecha y se puede usar de la misma manera para la izquierda

.yourComponent
{
   float: right;
   bottom: 0;
}

-25
2017-11-29 02:11