Home / Questions / 359025
Accepted
Josep Giner
Asked: 2020-05-26 01:39:39 +0800 CST 2020-05-26 01:39:39 +0800 CST

Как выровнять два изображения по горизонтали?

  • 772

У меня есть сомнения, и это то, как я могу выровнять два изображения по горизонтали, так как я тестировал это и не могу найти способ сделать это, если кто-то может мне помочь, я был бы признателен.

#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;
}
html

3 Answers

  1. Best Answer

    Вам просто нужно использовать свойство display: flexна том <div>, который содержит ваши два изображения.

    .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>

    РЕДАКТИРОВАТЬ

    Добавлено поле справа от первого изображения.

    • 1

  2. Начнем с того, что я думаю, что вы не должны использовать max-width : 55%его, потому что, если оба изображения достигнут этого максимума, это составит более 100%, поэтому одно изображение будет передано.

    Чтобы разместить изображение рядом, просто введите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>

    • 1

  3. вы можете использовать свойство сетки так же, как flex: пример с сеткой:

    <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>

    Вот ссылка на codepen

    Пример с флексом

    <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>

    ссылка здесь

    • 0