0

tengo una duda y es que como puedo alinear dos imagenes horizontalmente ya que lo he estado probando y no encuentro la manera de como puedo hacerlo , Si alguien me puede ayudar lo agradeceria

#foto{
    max-width: 55%;
height: auto;
margin: 20px;
padding: 5px;
display: block;
margin: auto;
}
#foto2{
    max-width: 55%;
height: auto;
margin: 20px;
padding: 5px;
display: block;
margin: auto;
}

3 respuestas 3

1

Te basta con usar la propiedad display: flex sobre el <div> que contenga tus dos imágenes.

.contenedor-imagenes {
  display: flex;
}

.contenedor-imagenes img:first-child {
  margin-right: 10px;
}
<div class="contenedor-imagenes">
  <img src="https://pbs.twimg.com/profile_images/1238517872802045953/BsjqKBhn_400x400.jpg">
  <img src="https://pbs.twimg.com/profile_images/1238517872802045953/BsjqKBhn_400x400.jpg">
</div>

EDIT

Añadido margen a la derecha de la primera imagen.

6
  • se podria dejar un pequeño espacio entre las dos imagenes .¿Seria posible? el 25 may. 2020 a las 9:53
  • Claro, te bastaría con añadir un margin: right a la primera imagen. Edité la respuesta para que se vea.
    – phpMyGuel
    el 25 may. 2020 a las 9:55
  • Muchas Gracias la verdad :D el 25 may. 2020 a las 9:56
  • Si te valió haz el favor de marcar la respuesta como válida. Se hace marcando el check verde que sale junto a la respuesta ^^
    – phpMyGuel
    el 25 may. 2020 a las 9:57
  • hecho, Muchas Gracias por la ayuda :) el 25 may. 2020 a las 10:00
1

Para empezar creo que no deberías a usar max-width : 55% ya que si ambas imágenes llegaran a alcanzar ese max, eso sumaría más del 100%, por lo cuál entonces una imagen se pasaría abajo.

Para colocar una imagen un lado a otra solo pon display: inline-bloc

#foto{
    max-width: 40%;
height: auto;
margin: 20px;
padding: 5px;
display: inline-block;
margin: auto;
}
#foto2{
    max-width: 40%;
height: auto;
margin: 20px;
padding: 5px;
display: inline-block;
margin: auto;
}
<div>
<img id ="foto" src="https://www.muycomputerpro.com/wp-content/uploads/2019/05/stack-overflow-brecha-seguridad.jpg"/>

<img id ="foto2" src="https://www.muycomputerpro.com/wp-content/uploads/2019/05/stack-overflow-brecha-seguridad.jpg"/>
</div>

0
0

puedes utilizar la propiedad grid al igual que flex: ejemplo con grid:

<style>
    .contenedor{
  background: #EED0C9;

  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, 100px); 
}
.caja_1{
  width: 100px;
  height: 100px;
  background-color: #76FF54;
  text-align: center;
}
.caja_2{
  width: 100px;
  height: 100px;
  background-color: #E97C2B;
  text-align: center;
}
</style>

<div class="contenedor">
  <div class="caja_1"> caja 1</div>
  <div class="caja_2">caja 2</div>
</div>

Aqui el enlace a codepen

Ejemplo con flex

<style>
  .contenedor{
      width: 100%;
      display: flex;
    }
    .caja_1{
      background: red;
      height: 100px;
      width: 100px;
    }
    .caja_2{
      background: blue;
      height: 100px;
      width: 100px;
    }
</style>


        <div class="contenedor">
      <div class="caja_1"> caja 1</div>
      <div class="caja_2">caja 2</div>
    </div>

enalce aqui

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.