2

Estoy trabajando en una app web. Necesito que el texto que dice "ESTE TEXTO", con la clase ".test" aparezca abajo en el div, es decir, necesito que aparezca pegado al borde de abajo de todo del div con la clase ".liveMatchTr"

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

.liveMatchTr{
                width: 80%;
                margin: auto;
                display: flex;
                border-bottom: 1px solid #5757573a;
                padding: 2rem 0;
                text-align: center;
                justify-content: center;
                flex: 1 1 20rem;
                &:nth-last-child(1){
                    border-bottom: none;
                }
                .score{
                    font-size: 2rem;
                    width: 50%;
                    padding: 2rem;
                }
                .team{
                    width: 50%;
                    font: bold 1.2rem $poppins, sans-serif;
                }
                .elapsedTime{
                    margin-top: 2vh;
                    color: #00cc00a2;
                    font-weight: 700;
                    font-size: 1rem;
                }
            }
2
  • Te recomiendo colocar el objeto "p" abajo del opjeto "liberMatchhTr" ya que estás posicionando con flexbox, quitar flexbox a esta última y colocar los otros tres items en un div con flex, luego centras "p", para ayudarte mejor te recomiendo que no pegues capturas de código, ya que para hacer pruebas, se dificlta para ayudarte, siempre pega el código en la pregunta.
    – Elboy
    Commented el 20 ago. 2020 a las 22:11
  • Agrégale el estilo flex
    – user46896
    Commented el 20 ago. 2020 a las 22:11

2 respuestas 2

1

Trabajar inicialmente con flexbox mueve todos los nodos bajo su contexto al eje horizontal de izquierda a derecha lo cual genera aparezcan uno a lado del otro.

Por eso tú párrafo se muestra a un lado del div, solución:

  • El div con clase liveMatchTr deberá ser contenedor de:
    • un div que envuelva a team, Score y team (solo a estos elementos)
    • la etiqueta p debe estar como hija directa de liveMatchTr y como hermana del div que contenga a los elementos del punto anterior

Con lo anterior logramos que al hacer uso de

En el div liveMatchTr entonces el div que envuelve a team y Score quedé apilado encima del párrafo.

Entonces de forma independiente puedes maquetar a team y Score dentro del div nuevo donde los declaras te

0

Puedes darle un flex wrap para que los contenidos bajen más y además dale un display space between

1
  • 1
    Lo valioso sería que publicaras el código mostrando como se hace. De paso, demuestras y aseguras que la respuesta es correcta.
    – Candid Moe
    Commented el 23 ago. 2020 a las 9:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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