0

Estoy intentado alinear 3 imagenes una al lado de otra pero no soy capaz

mi codigo

HTMl
 <div class="programacionImg">
                <img src="/static/medicos/images/programa22.png" alt="">
                <img src="/static/medicos/images/programa23.png" alt="">
                <img src="/static/medicos/images/programa25.png" alt="">
            </div>

CSS.programacionImg{
display:flex;
}

pero la caja se me hace mas grande e intente dar un width pero ya me descompensa lo que tengo en la parte mobile que si que sale bien, si pudieran darme alguna idea

1
  • Quizas este no sea todo tu html y css y algo más está afectando, por favor asegurate que agregas todo el codigo.
    – Excorpion
    Commented el 4 nov. 2021 a las 13:27

2 respuestas 2

0

Y que se supone que obtienes ??
Use el mismo codigo que tu y las imagenes ya estaban alineadas como quieres.

.programacionImg {
  display: flex;
}

/* Este css es solo para que se vea el display en SO */
img {
  width: 33.3%; 
  height: auto; 
}
<div class="programacionImg">
  <img src="https://loremflickr.com/320/240" alt="">
  <img src="https://loremflickr.com/320/240" alt="">
  <img src="https://loremflickr.com/320/240" alt="">
</div>

12
  • OP en ningún momento utilizó img { width: 33.3%; height: auto; }, podría ser que sus imágenes sean demasiado grandes y no se acomoden por esa razón.
    – Israel-ICM
    Commented el 4 nov. 2021 a las 13:23
  • Tal como se encuentra escrita tu respuesta mas bien parece un comentario que una solución, tal vez si la adecuas seria la solución al problema de OP. ;)
    – Israel-ICM
    Commented el 4 nov. 2021 a las 13:24
  • Si el OP tiene resuelto su problema no es mi culpa. Que haya un width no cambia el hecho de que las imagenes estan alineadas correctamente.
    – Excorpion
    Commented el 4 nov. 2021 a las 13:25
  • 1
    Mmm bueno tanto como echarle la culpa no, pero me base en lo que dijiste Use el mismo código que tu y según vi OP no utilizaba esa porción de código, vale de todas formas hasta que OP no agregue al menos una captura de lo que sucede no sabremos cual es el error.
    – Israel-ICM
    Commented el 4 nov. 2021 a las 13:32
  • 1
    Me retracto, tienes mucha razón en el caso de flex no afecta.
    – Israel-ICM
    Commented el 4 nov. 2021 a las 13:37
0

Yo usaría flexbox:

.programacionImg {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.programacionImg img {
    width: 33.3%;
    height: auto;
}

Con estas propiedades de flexbox las imagenes estarán centradas hacia el centro, tanto verticalmente como horizontalmente y en el caso de que se reduzca la resolución de la pantalla al no entrar una al lado de la otra se desplazará abajo para que entren correctamente.

<div class="programacionImg">
    <img src="/static/medicos/images/programa22.png" alt="">
    <img src="/static/medicos/images/programa23.png" alt="">
    <img src="/static/medicos/images/programa25.png" alt="">
</div>

Puse un tamaño para que sume un 100% del total del contenedor padre, pero si quieres añadirle un margin o padding a las imágenes tendrás que modificar el tamaño o todo sumará más de un 100% y una de las imágenes te saltará de linea

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.