我认为它可以更好地说明...
假设我们的HTML:
<div>What the hack ?</div>
还有我们的CSS:
div {
width: 100%;
display: table-cell;
background: pink;
}
您会注意到
<div>
的宽度表现得像一个浮动元素:它的大小与其内容一样大,而不是向两侧伸展。现在开始减小宽度,突然您会看到
<div>
增大。这是一个交互式演示:
http://dabblet.com/gist/9891801
这是为什么 ?它是如何工作的 ?
最佳答案
这是数学:
table-cell的宽度为100%,表示您有一个表格,每行有一个单元格。已知宽度-在您的情况下-是文本的宽度(89px)。
如果我们将表格单元格的宽度设置为50%,则意味着该单元格的宽度是整个表格宽度的一半。我们将已知宽度加倍,达到178px。
结论,结束宽度将为100 / {table-cell的宽度} * {element的offsetWidth}
已发布链接http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes解释了为什么会发生这种情况
关于html - 带有百分比值的表格单元格宽度如何工作?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22762788/