Question

我目前遇到一个问题，即我用于子div的百分比与父div相比似乎没有效果。

<div id="NavBar">
    <div class="Button"></div>
    <div class="Button"></div>
    <div class="Button"></div>
    <div class="Button"></div>
    <div class="Button"></div>
</div>

#NavBar {
    Height:10vh;
    Width:100%;
    background-color:gray;
    float:left;
    position:relative;

.Button {
    Height:90%;
    Width:10%;
    margin-left:8.5%;
    margin-top:5%;
    background-color:Black;
    float:left;

https://jsfiddle.net/7duea0ou/

父母div的5％肯定不是它的整个高度，我不确定是什么导致了这个问题。

如何设置保证金仅为父div的5％？

谢谢，

杰森

Answer 1

保证金中使用的％值是指父class Product(models.Model): name = models.CharField("product", max_length=200) price = models.DecimalField("price", max_digits=10, decimal_places=2) category = models.ForeignKey(Category, on_delete=models.CASCADE, related_name="products", verbose_name="category") def discount_value(self): return self.category.discount和不 width，即使是保证金最高和保证金最低。正如您可以阅读here：

百分比是根据宽度计算的生成的框包含块。请注意，这是真的 'margin-top'和'margin-bottom'也是如此。如果包含块的话 width取决于此元素，然后生成的布局未定义在CSS 2.1中。

因此，您可以考虑进行一些计算并使用变量，而不是使用％。

以下是一个例子：

height

:root {
  --main-height: 10vh; /*we define the height of the navbar*/
}

#NavBar {
  height: var(--main-height);
  Width: 100%;
  background-color: gray;
  float: left;
  position: relative;
}

.Button {
  height: 90%;
  width: 10%;
  margin-left: 8.5%;
  margin-top: calc((var(--main-height) * 5) / 100); /* we take 5% of the height*/
  background-color: Black;
  float: left;
}

顺便说一下，使用flex可以简化代码，而无需设置边距值：

<div id="NavBar">
  <div class="Button"></div>
  <div class="Button"></div>
  <div class="Button"></div>
  <div class="Button"></div>
  <div class="Button"></div>
</div>

#NavBar {
  height: 10vh;
  background-color: gray;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.Button {
  height: 90%;
  flex-basis: 10%;
  background-color: Black;
}

以下是一个类似的问题，您可以在其中找到更多方法：

How to set the margin or padding as percentage of height of parent container?

Answer 2

无论您定义的边距（左/右或上/下），

margin都与父元素的宽度有关。

子div百分比不正确

2 个答案: