Вставить изображение горизонтально при нажатии кнопки

Итак, вот чего я пытаюсь достичь. Я хочу, чтобы изображение было в центре страницы, и при нажатии кнопки рядом с ним появится второе изображение, выровненное по горизонтали с первым (с ровным интервалом между ними).

Прямо сейчас у меня есть код, чтобы выровнять их рядом друг с другом, и они работают нормально.

HTML:

div class="quiz">

    <div class="column">    
            <span id="img1label" class="word"></span>
            <img id="img1" class="imgs"/>
        </div>
            <div class="column">    
            <span id="img2label" class="word"></span>
            <img id="img2" alt="quiz image" class="imgs"/>
        </div>


   </div>

CSS:


.quiz {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    margin: auto;
  }

.column{
     display:flex;
     justify-content:center;
     flex-direction: column;
     flex-grow: 1;
  }

  .imgs{
      display:block;
      width:50%;
  }

.word{
      display:block;
      width: 100%;
      text-align:center;

  }

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

Проблемы с этим:

  1. Исходное изображение не центрировано, оно сдвинуто до упора влево.
  2. Вставка нового изображения на самом деле не является вставкой, поэтому ничего не меняется в макете, чтобы отрегулировать поля по центру двух новых изображений.

Я попытался использовать учебник по сетке изображений здесь: https://www.w3schools.com/howto/howto_js_image_grid.asp Но я не хочу изменять размер реальных изображений. Я просто хочу, чтобы они отдалялись друг от друга при изменении количества отображаемых изображений. Я не использую JQuery прямо сейчас, и я бы предпочел, чтобы мне не приходилось учиться использовать совершенно новый пакет для решения, казалось бы, простой проблемы, с которой я борюсь. Любая помощь приветствуется.


javascript html css flexbox
person OllieRobin    schedule 20.04.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Насколько я понимаю, вы должны добавить выравнивания в свой класс .quiz

.quiz {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    margin: auto;
  }

тогда ваши элементы в этом блоке будут выровнены. И если вы хотите добавить пространство между изображениями, просто добавьте к ним поля.

person Romanas    schedule 20.04.2020