【问题标题】:Understanding display:table-cell; functioning理解 display:table-cell;发挥作用
【发布时间】:2012-02-25 09:56:56
【问题描述】:

请注意,我并不是要解决任何具体问题,而是要了解导致此问题的原因。

我已经设置了一些 div 的 widthheightdisplay,但是高度/宽度设置没有得到遵守。文本也被向下推。

http://jsfiddle.net/k7esv/

1) 为什么在表格行中设置height 时将文本向下推,然后在删除height 时将文本放在顶部?

2) 为什么不支持宽度/高度设置?

3) 为什么设置margin 属性对它们也没有任何影响?

http://jsfiddle.net/k7esv/1/

【问题讨论】:

  • 在这里聚会有点晚了,但只是为了澄清其他人:display: table-cell 模拟真实表格单元格的行为(所有单元格具有相同的高度,内容无法逃脱其容器/单元格,并且单元格没有边距,但它们可以有填充和边框)。此外,任何应用于display: table-cell 元素的float 都会取消表格单元格的效果。

标签: css css-tables


【解决方案1】:

1) 这似乎是 Firefox 特有的渲染问题。在 div 上设置 vertical-align 属性可以修复它。 topmiddlebottom 似乎都有效。当有height 但没有vertical-align 设置时,我不明白FF 在做什么;这可能是一个错误。

2) 宽度和高度是可以接受的,但它们受制于表格大小规则。当表格没有足够的空间给每个单元格指定它们指定的宽度时,它将为具有更多内容的单元格提供更多空间。这就是您的示例所发生的情况。如果您查看下面的示例,您会看到当父元素比表格单元格宽度的总和宽时,单元格会尊重宽度。高度应该始终有效(除了我上面提到的 FF 渲染问题)。

3) 表格单元格没有边距。在父 div 上使用边框间距和 display:table。

http://jsfiddle.net/chad/k7esv/3/

【讨论】:

  • 我更新了我的答案和我的小提琴来解决你的第一个问题。你所看到的不会发生在 WebKit 中,所以我一开始没有看到。
【解决方案2】:

我将添加(看起来似乎已经错过了)在表格行中设置单个表格单元格的高度可能没有意义,因为同一表格行中的所有单元格将成为与最高单元格相同的高度在所述行中。

话虽如此,当动态内容提供给不同的单元格时,可能需要添加高度,这意味着它们的高度会波动。您可能希望将特定单元格设置为永远不会小于高度 X,这只会在另一个特定单元格的内容较少时生效。

【讨论】:

  • 我有一个奇怪的单元格显示了我无法解释的填充...我无法弄清楚。阅读您的回复后,我有一个“呃”的时刻,然后回去发现另一个导致它的元素的底部边距。谢谢!
猜你喜欢
  • 1970-01-01
  • 2015-12-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-02-13
  • 1970-01-01
  • 2022-06-27
相关资源
最近更新 更多