Question

我认为它有更好的说明......

假设我们的HTML：

<div>What the hack ?</div>

我们的CSS：

div {
  width: 100%;
  display: table-cell;
  background: pink;
}

您会注意到<div>的宽度表现得像浮动元素：它的内容与其内容一样大，而不是伸展到两侧。

现在开始减小宽度，突然间你会看到<div>正在增长。

这是一个互动演示：

为什么？它是如何工作的？

Answer 1

这是数学：

表格单元格的宽度为100％意味着您有一个每行包含一个单元格的表格。已知宽度 - 在您的情况下 - 是文本的宽度（89px）。

如果我们将table-cell的宽度设置为50％，则表示单元格宽度为整个表格宽度的一半。我们将已知宽度加倍到178px。

结论，结束宽度将为100 / {table-cell的宽度} * {element的offsetWidth}

解释了为什么会发生这种情况

Answer 2

你真的需要display: table-cell;属性??

如果你删除了div，那就好了！

但如果您想要解释，请参阅this