为什么带百分比的宽度在 CSS 中不起作用？

Question

这是我的代码，运行良好。

.c-table {
  display: flex;
  flex-wrap: wrap;
}

.c-plate {
  width: 50px;
  height: 96px;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.yellow {
  background: yellow;
}

<div class="c-table">
   <div class="c-plate red"></div>
   <div class="c-plate blue"></div>
   <div class="c-plate yellow"></div>
</div>

我把 .c-plate 的 width 改成了这样：

.c-plate {
  width: 50%;
  height: 96px;
}

.c-table {
  display: flex;
  flex-wrap: wrap;
}

.c-plate {
  width: 50%;
  height: 96px;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.yellow {
  background: yellow;
}

<div class="c-table">
   <div class="c-plate red"></div>
   <div class="c-plate blue"></div>
   <div class="c-plate yellow"></div>
</div>

我预计每个 div 和 c-plate class 的宽度变为 c-table 宽度的 50%。

但是，它没有按预期工作。

Answer 1

如@Geeky Quentin 所述，这是预期的行为。

您将 .c-plate 设置为 50% width。具有 .c-plate 的元素将寻找其父元素以获取 50% 的元素。由于您的 .c-table 没有设置宽度属性，它只是变成了 body 的 50%。

您可以设置 .c-table 的宽度以使 .c-plate 继承该宽度。但是，它仍将是 50%，并且由于有 3 个 .c-plate，因此总共将是 150% 并绕到下一行，因为 flex-wrap 是 wrap.

.c-table {
  display: flex;
  flex-wrap: wrap;
  
  width: 500px;
}

.c-plate {
  width: 50%;
  height: 96px;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.yellow {
  background: yellow;
}

<div class="c-table">
   <div class="c-plate red"></div>
   <div class="c-plate blue"></div>
   <div class="c-plate yellow"></div>
</div>

如果这不是您想要的结果，您必须更具体地说明您想要什么。

你想拥有这样的东西吗？

.c-table {
  display: flex;
  flex-wrap: wrap;
  
  width: 500px;
}

.c-plate {
  width: 33%;
  height: 96px;
}

.red {
  background: linear-gradient(to right, red 0 50%, white 50% 100%);
}

.blue {
  background: linear-gradient(to right, blue 0 50%, white 50% 100%);
}

.yellow {
  background: linear-gradient(to right, yellow 0 50%, white 50% 100%);
}

<div class="c-table">
   <div class="c-plate red"></div>
   <div class="c-plate blue"></div>
   <div class="c-plate yellow"></div>
</div>

Answer 2

它按预期工作。 child (c-plate) 的宽度是相对于 parent (c-table).

的宽度

这意味着如果您想更改 c-plate 元素的相对宽度，您必须在 c-table 上设置宽度。

body {
    background: black;
}

.c-table {
  display: flex;
  flex-wrap: wrap;  
  width: 50%;
  background: gray;
}

.c-plate {
  width: 50%;
  height: 96px;
}

.red {
  background: linear-gradient(to right, red 0 50%, white 50% 100%);
}

.blue {
  background: linear-gradient(to right, blue 0 50%, white 50% 100%);
}

.yellow {
  background: linear-gradient(to right, yellow 0 50%, white 50% 100%);
}

<div class="c-table">
   <div class="c-plate red"></div>
   <div class="c-plate blue"></div>
   <div class="c-plate yellow"></div>
</div>

为什么带百分比的宽度在 CSS 中不起作用？

Why doen't width with percentage work in CSS?

html

css

flexbox