Показать сообщение отдельно
  #2 (permalink)  
Старый 16.12.2019, 22:38
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      box-sizing: border-box;
    }

    .items {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .right-item,
    .left-item {
      position: sticky;
      top: 0px;
      display: grid;
      height: 500px;
      align-items: center;
      justify-items: center;
      margin: 1em;
      font-size: 4em;
      border: 1em solid lightcoral;
    }

    .left-item {
      background-color: lightgray;
    }

    .right-item {
      background-color: darkgray;
    }
  </style>
</head>

<body>
  <div class="container"></div>
</body>
<script>
  const text = [['Super', 'Zen'], ['Zen', 'Super']]

  const containerEl = document.querySelector('.container')

  containerEl.innerHTML = text.map(([item1, item2]) => {
    return `<div class="items">
        <div class="left-items">
          ${[...item1].map(i => `<div class="left-item">${i}</div>`).join('')}
        </div>
        <div class="right-items">
          ${[...item2].map(i => `<div class="right-item">${i}</div>`).join('')}
        </div>
      </div>`
  }).join('')
</script>

</html>
Ответить с цитированием