Сохранение развернутых элементов div при расширении страницы - PullRequest
Новая
       6

Сохранение развернутых элементов div при расширении страницы

0 голосов
/ 31 августа 2018

У меня есть два элемента div, которые вращаются и должны поддерживать одинаковое расстояние по мере того, как страница расширяется, а также не увеличивается. Однако, поскольку они в настоящее время настроены, они расширяются, и пространство между ними увеличивается. Мне нужно, чтобы они сохраняли свое расстояние и ширину при расширении страницы и не уверены, почему они не такие, как они установлены: 

<div class="masthead-wrapper">
  <div class="masthead-two-boxes-angled-wrapper">
    <div class="left">Left</div>
    <div class="right">Right</div>
  </div>
</div>



.masthead-wrapper {
  z-index: 0;
  width: 100%;
  margin-bottom: 10px;
  .masthead-content {
    position: relative;
    display: flex;
    width: 1172px;
    background-color: #fff;
    margin: 0 auto;
  }
  .masthead-two-boxes-angled-wrapper {
    height: 400px;
    margin: 0 auto;
    display: flex;
    z-index: 0;
    transform: rotate(-45deg);
    .left {
      width: 45%;
      background-color: #eee;
      height: 100%;
      margin: 0 auto;
      top: -20px;
      position: relative;
    }
    .right {
      width: 40%;
      background-color: #eee;
      height: 100%;
      margin: 0 auto;
      bottom: 20px;
      position: relative;
      box-shadow: 0 -22px 29px 10px #cecece;
    }
  }
}

JSFIDDLE: Ссылка

1 Ответ

0 голосов
/ 31 августа 2018

Они реагируют на изменение ширины экрана, поскольку ваша ширина, установленная на .masthead-wrapper, указана в процентах. Изменение его на ширину в пикселях предотвратит изменение размера. Однако при ширине пикселя вам, возможно, придется установить различные контрольные точки, чтобы настроить то, как вы хотите, чтобы левый и правый прямоугольники отображались на рабочем столе, планшете и мобильном устройстве.

Пример: 

.masthead-wrapper {
    z-index: 0;
    width: 100%;
    margin-bottom: 10px;

    /* Tablet */
    @media (min-width: 480px) {
        width: 400px;
    }

    /* Desktop */
    @media (min-width: 960px) {
        width: 600px;
    }
}

Кроме того, у вас есть стилизованный класс, на который нет ссылок в HTML (.masthead-content). Вы можете удалить это полностью, если вам это не нужно по какой-то другой причине. Надеюсь, это поможет.

Обновленная скрипка: http://jsfiddle.net/meq31d0x/25/

...