元素的最大宽度是父级最大宽度的 50%？答案

【问题标题】：Element's max-width 50% of parent's max-width?元素的最大宽度是父级最大宽度的 50%？
【发布时间】：2020-10-09 13:10:20
【问题描述】：

我个人将 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 设置为父母 max-width 的 50%：

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

这完美无缺，但我想知道是否有可能动态实现相同的结果，即：

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

显然这行不通，但你明白了。

我希望的原因是，如果我将父母的 max-width 从 1024 更改为其他名称，那么我必须手动检查所有孩子并进行调整。在像这样的简化示例中，更改一个数字显然不是问题，但在具有数百种样式的实际项目中，它会成为一种负担。

我不想为此使用 React 或 JS，除了 styled-components 支持的。理想情况下，我希望这可以在 CSS 或 SASS 中完成。

【问题讨论】：

标签： html css reactjs sass styled-components

【解决方案1】：

你可以像这样使用这个 calc css 属性来实现它

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

const Child = styled.div`
  max-width: calc(100% / 2);
`;

【讨论】：

好主意，但它高度依赖于 DOM 结构，我猜很容易被破坏。
CSS 总是依赖于 DOM 结构，我们总是根据 DOM 结构编写 css，因为它确实是它的样式表。而且我认为通过 js 变量对宽度进行硬编码从来都不是一个好习惯
这不是重点，CSS当然依赖于DOM。我的意思是 您的解决方案 高度依赖于 DOM，例如，如果孩子具有绝对位置或任何其他会导致 calc 返回不想要的值的样式，它很容易被破坏。当然，使用 js 变量来跟踪样式值是一种很好的做法，因为您可以集中布局默认值并确保始终重用正确的值（此外，通常这就是定义断点的方式）

【解决方案2】：

我建议你将父母的宽度定义为一个常数：

const parentWidth = 1024;

然后将它用于父子样式组件：

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

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

【讨论】：

【解决方案3】：

我没有受过良好的反应方面的教育，但是这是可以动态实现您正在寻找的原始 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;
`;

【讨论】：