Сделайте так, чтобы два элемента странного размера были центром и краями относительно воображаемого контейнера - PullRequest
Новая
       3

Сделайте так, чтобы два элемента странного размера были центром и краями относительно воображаемого контейнера

0 голосов
/ 05 апреля 2019

Суть проста с шириной 50%, как в приведенной выше версии, показанной в codepen, работает так, как задумано, содержимое находится внутри воображаемого контейнера, показанного вверху серой рамкой. Проблема возникает при использовании неравных процентов, поэтому фиксированная максимальная ширина будет работать только при фиксированной ширине окна.

Существует ли какая-нибудь формула calc для ее работы? и т.д.

https://codepen.io/rKaiser/pen/NmNrXp

.uneven {
  .right,
  .left {
    width:65.3%;
    .content {
      max-width:420px;
      margin-left:auto;
    }
  }
  .right {
    width:34.7%;
      .content {
       max-width:180px;
       margin-left:0;
       margin-right:auto;
    }
  }
}

1 Ответ

1 голос
/ 05 апреля 2019

Ваш контейнер имеет размер, равный W (600px в вашем примере), тогда наш полный контейнер является полноэкранным, поэтому 100vw, поэтому поле с обеих сторон равно (100vw - W) / 2, так что вы можете просто использовать этополе с внутренними элементами.

Небольшой недостаток заключается в том, что 100vw включает в себя также ширину полосы прокрутки, поэтому при наличии полосы прокрутки вычисление будет незначительным: 

body {
  background: #666;
  margin: 0;
}

.container {
  height: 100px;
  background: #888;
  max-width: 600px;
  margin: 0 auto;
}

.full {
  display: flex;
  background: orange;
  height: 45px;
  margin-bottom: 4px;
}

.left {
  width: 50%;
  background: #16CC4A;
}

.left .content {
  margin-left: calc((100vw - 600px)/2);
  border: 1px solid red;
}

.right .content {
  margin-right: calc((100vw - 600px)/2);
  border: 1px solid red;
  text-align: right;
}

.right {
  background: #D98813;
  width: 50%;
}

.uneven .left {
  width: 65.3%;
}

.uneven .right {
  width: 34.7%;
}

@media all and (max-width:600px) {
  .left .content,
  .right .content {
    margin: 0;
  }
}
<body>
  <div class="container"></div>
  <div class="full even">
    <div class="left">
      <div class="content">
        Edge
      </div>
    </div>
    <div class="right">
      <div class="content">
        Edge
      </div>
    </div>
  </div>
  <div class="full uneven">
    <div class="left">
      <div class="content">
        Edge
      </div>
    </div>
    <div class="right">
      <div class="content">
        Edge
      </div>
    </div>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...