В CSS (без запроса @media), как применить / удалить интервал, когда компонент имеет определенную ширину - PullRequest
Новая
       35

В CSS (без запроса @media), как применить / удалить интервал, когда компонент имеет определенную ширину

0 голосов
/ 20 декабря 2018

Я пытаюсь выяснить следующий макет, используя только CSS и без запроса @media.Скажем, у меня есть следующая отправная точка для HTML: 

<div class="layout">
  <div class="content"></div>
</div>

* * * * * * * * * * * * * * * * * * * * * * * .layout содержит элемент уровня 100 *, который имеет ширину 100%, но максимальную ширину X.(например, X = 400px.) Поскольку .layout расширяется, а справа после достижения максимальной ширины .content, я бы хотел внезапно применить встроенный (правый / левый) интервал S (например, S = 16px.)

Это приведет к уменьшению ширины .content вначале, но по мере увеличения .layout ширина .content будет расти до Xв этот момент расстояние между строками (справа / слева) будет продолжать расти, сохраняя центрирование .content. 

   400px              401px                 432px                   434px

+----------+    +---------------+    +-----------------+    +-------------------+
|.layout   |    |               |    |                 |    |                   |
|          |    |               |    |                 |    |                   |
|          |    |               |    |                 |    |                   |
|          |    |               |    |                 |    |                   |
+----------+    |   +-------+   |    |   +---------+   |    |    +---------+    |
|.content--|    |   |-------|   |    |   |---------|   |    |    |---------|    |
|----------|    |   |-------|   |    |   |---------|   |    |    |---------|    |
|----------|    | 1 |-------| 1 |    | 1 |---------| 1 |    | 1  |---------|  1 |
|--400px---| => | 6 |-369px-| 6 | => | 6 |--400px--| 6 | => | 7  |--400px--|  7 |
|----------|    | p |-------| p |    | p |---------| p |    | p  |---------|  p |
|----------|    | x |-------| x |    | x |---------| x |    | x  |---------|  x |
|----------|    |   |-------|   |    |   |---------|   |    |    |---------|    |
+----------+    |   +-------+   |    |   +---------+   |    |    +---------+    |
|          |    |               |    |                 |    |                   |
|          |    |               |    |                 |    |                   |
|          |    |               |    |                 |    |                   |
|          |    |               |    |                 |    |                   |
+----------+    +---------------+    +-----------------+    +-------------------+

Я пробовал различные конфигурации с display:flex и display:grid, но не могузаставить его работать.Вот база, с которой я начинал, но к ней не применен интервал: 

/* "Inactive ingredients" would not be present in the actual implementation. */

.layout {
  /* Inactive ingredients: */
  background-color: yellow;
  height: 200px;
}

.content {
  max-width: 400px;
  margin: 0 auto;
  
  /* Inactive ingredients: */
  background-color: green;
  height: 100%;
}
<div class="layout">
  <div class="content"></div>
</div>
...