CSS 理解 display:table-cell; 运作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9442999/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Understanding display:table-cell; functioning
提问by Shawn Taylor
Please note that I am not trying to resolve any specific issue, but trying to understandwhat's causing this issue.
请注意，我不是要解决任何特定问题，而是要了解导致此问题的原因。
I have set the width, heightand displayof some divs, but the height/width settings are not being honored. The text is also being pushed downward.
我已经设置了一些 div的width,height和display，但是高度/宽度设置没有得到尊重。文本也被向下推。
1) Why does it push the text downward when heightis set in table-row then BUT when heightis removed, it places text at the top?
1）为什么它height在表格行中设置时将文本向下推，然后在height删除时将文本向下推，它将文本放在顶部？
2) Why are the width/height settings not honored?
2）为什么不遵守宽度/高度设置？
3) Why doesn't setting the marginproperty have any effect on them either?
3）为什么设置margin属性对它们也没有任何影响？
回答by Chad von Nau
1) This seems to be a rendering issue specific to Firefox. Setting the vertical-alignproperty on the divs fixes it. top, middle, or bottomall seem to work. I don't understand myself what FF is doing when there is a heightbut no vertical-alignset; it might be a bug.
1) 这似乎是 Firefox 特有的渲染问题。vertical-align在 div 上设置属性可以修复它。top, middle, 或bottom所有似乎都有效。我不明白当有一个height但没有vertical-align集合时 FF 在做什么；这可能是一个错误。
2) The width and height are honored, but they are subject to table sizing rules. When a table does not have enough room to give each of the cells the width they have specified, it will give more room to cells that have more content. This is what was happening with your example. If you look at my example below, you will see that when the parent element is wider than the sum total of the table cells' widths, the cells respect the width. The height should always work (except in the case of the FF rendering issue I mentioned above).
2) 宽度和高度受到尊重，但它们受表格大小规则的约束。当表格没有足够的空间来为每个单元格提供它们指定的宽度时，它将为具有更多内容的单元格提供更多空间。这就是你的例子发生的事情。如果您查看下面的示例，您将看到当父元素的宽度大于表格单元格宽度的总和时，单元格会遵循宽度。高度应该始终有效（除了我上面提到的 FF 渲染问题）。
3) Table cells don't have margins. Use border-spacing and display:table on a parent div.
3）表格单元格没有边距。在父 div 上使用边框间距和 display:table。
回答by mr_reamer
I will just add (seeing as it seems to have been missed) that setting the heights on individual table cells in a table row can be pointless, as all cells in the same table row will become the same height as the tallest cell in said row.
我将添加（因为它似乎被遗漏了）在表格行中的单个表格单元格上设置高度可能毫无意义，因为同一表格行中的所有单元格将变得与所述行中最高的单元格相同.
Having said that, heights may want to be added for when dynamic content is served to different cells, meaning their heights fluctuate. It may be that you want to set a particular cell to never be less than height X, which will only come in to effect when another certain cell has less content.
话虽如此，当动态内容提供给不同的单元格时，可能需要添加高度，这意味着它们的高度会波动。可能您希望将特定单元格设置为永远不会小于高度 X，这仅在另一个特定单元格的内容较少时才会生效。
