如何根据自己的宽度而不是父 div 将 CSS 边距/填充设置为子 div？

Posted 2023-03-06

【中文标题】如何根据自己的宽度而不是父 div 将 CSS 边距/填充设置为子 div？

【英文标题】：How to set css margin/padding to a child div based on its own width, and not of parent?

【发布时间】：2016-03-30 22:01:45

【问题描述】：

例如：

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

在这里，通常如果我将边距设置为 20%，则它是父宽度的 20%。但我希望孩子根据自己的宽度计算边距。有没有可能？

编辑：

（橙色）边距应根据（绿色）子级的宽度计算。 IE。绿框越宽，边距越大。 （或者在我的情况下更少）。

基本类似于margin:auto。但我不想使用它，因为我们不想让它完全居中对齐。

【问题讨论】：

孩子的宽度是怎么设置的？我的意思是，如果您在 CSS 中明确设置像素宽度，您可以在 CSS 中将边距设置为特定数量的像素（即 - 20% 的任何值），而忘记整个百分比。如果您没有为孩子明确设置宽度，那么您可以轻松编写一些javascript来计算孩子的宽度，然后适当地设置边距。如果你想走这条路，请告诉我。

相对单位：%、em、rem、vh、vw 绝对单位：px、pt 所有相对单位都必须有可比较的东西，AFAIK 使用 px 肯定会让元素独立存在。如果您想要灵活性但需要更多控制，请尝试将 rem 用于小规模，将 vh 和 vw 用于大规模。

没有截图或涂鸦，我真的不知道你在问什么。为孩子添加边距听起来很容易，但那太简单了。

【参考方案1】：

只要将子div嵌套在父div中，子div的属性就会相对于父div的属性。

【参考方案2】：

使用不可见的div。

例如如果要在子 div 的 20% 左侧设置边距，只需将子 div 的宽度设置为 84%，将 div 的宽度设置为 16%。 另外，请使用id，而不是class：

<div id="parent">
    <div class="invisible"></div>
    <div id="child">...</div>
</div>

在style.css:

.invisible 
  display:none;

另外，将其余divs 中的display 设置为inline-block 以使它们水平对齐。

【参考方案3】：

在position:relative 中设置父Div 和% 中的边距，并在pixel 中为子元素提供修复height 和width 以及margin 和pixel 要么 第二种方式，用position relative设置父div，用position absolute为子元素设置left right and width