0

Como podría mover el botón que está depués del texto hasta la parte de abajo del recuadro gris sin utilizar postion relative(al padre) y abosolute al botón? Así como lo muestro en la imagen.

introducir la descripción de la imagen aquí

Esta es mi estructura html que estoy utilizando:

<div class="post-container">
        <h5>Health</h5>
        <h3>Lorem ipsum dolor sit a met</h3>
        <a href="#0">
            <button>Learn More</button>
        </a>
</div><!--post-container-->

y sass para los estilos:

.post-container {
    background-color: $c-title;
    padding: 20px 20px 24px;
    height: 100%;

    h5,
    h3 {
      font-size: 16px;
      font-weight: 700;
      line-height: 21px;
      color: #FFF;
      margin-bottom: 20px;
    }

    a {
       button {
              background-color: #ebebeb;
              color: #404041;
              font-weight: 700;
              font-size: 14px;
              line-height: 23px;
              font-family: Montserrat,sans-serif;
              padding: 10px 20px;
              outline: 0;
              border: 0;
              width: 100%;
              max-width: 160px;
              text-align: left;
       }
    }
}

1 respuesta 1

1

Solo usa display: flex; flex-flow: column; en el padre. Y en el elemento hijo dale un margin-top: auto;

.post-container {
    display: flex;
    flex-flow: column;
    background-color: $c-title;
    padding: 20px 20px 24px;
    h5, h3 {
      font-size: 16px;
      font-weight: 700;
      line-height: 21px;
      color: #FFF;
      margin-bottom: 20px;
    }

    a {
       margin-top: auto;
       button {
              background-color: #ebebeb;
              color: #404041;
              font-weight: 700;
              font-size: 14px;
              line-height: 23px;
              font-family: Montserrat,sans-serif;
              padding: 10px 20px;
              outline: 0;
              border: 0;
              width: 100%;
              max-width: 160px;
              text-align: left;
       }
    }
}

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.