Максимальная ширина элемента 50% максимальной ширины родительского элемента? - PullRequest
Новая
       20

Максимальная ширина элемента 50% максимальной ширины родительского элемента?

0 голосов
/ 19 июня 2020

Я лично использую React с styled-components, но это проблема CSS / HTML. Вот моя простая структура HTML: 

<div class="parent">
  <div class="child">
  </div>
</div>

Родительский div имеет max-width из 1024px;. Я использую styled-components для этого, но это не имеет значения: 

const Parent = styled.div`
  max-width: 1024px;
`;

И теперь я хочу установить ширину max-width моего дочернего элемента на 50% от max-width родителя. : 

const Child = styled.div`
  max-width: 512px;
`;

Это работает безупречно, но мне было интересно, можно ли достичь того же результата динамически, т.е. что-то вроде: 

max-width: %parent.max-width / 2;

Очевидно, что это не работает , но вы поняли идею.

Причина моего wi sh заключается в том, что если я когда-нибудь изменю max-width моего родителя с 1024 на что-то другое, тогда мне придется вручную go через все детей и настройте их тоже. В таком упрощенном примере, как этот, явно не проблема изменить одно число, но в реальном проекте с сотнями стилей это становится обузой.

Я бы предпочел не использовать для этого React или JS , кроме того, что поддерживает styled-components. В идеале я надеялся, что это можно сделать в CSS или SASS.

Ответы [ 3 ]

1 голос
/ 19 июня 2020

Я бы посоветовал вам определить родительскую ширину как константу: 

const parentWidth = 1024;

, а затем использовать ее как для родительских, так и для дочерних стилизованных компонентов: 

const Parent = styled.div`
  max-width: ${parentWidth}px;
`;

const Child = styled.div`
  max-width: ${parentWidth / 2}px;
`;
1 голос
/ 19 июня 2020

Вы можете достичь этого, используя свойство cal c css, например, 

const Parent = styled.div`
  max-width: 1024px;
`;

const Child = styled.div`
  max-width: calc(100% / 2);
`;
0 голосов
/ 19 июня 2020

Я не очень хорошо осведомлен о том, как реагировать, однако это необработанный CSS, который динамически достигает того, что вы ищете. 

<div style="position:relative;">
   <div style="display:inline-block; width:50%;">
   </div>

   <div style="display:inline-block; width:50%;">
   </div>
</div>

Итак, если вы сделаете это со стилизованными компонентами: 

const Parent = styled.div`
  max-width: 1024px;
  position: relative;
`;

const Child = styled.div`
  max-width: 50%;
  display:inline-block;
`;
...