css – 了解显示:table-cell;功能

前端之家收集整理的这篇文章主要介绍了css – 了解显示:table-cell;功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
请注意,我不是想解决任何具体问题,而是试图了解导致此问题的原因。

我已经设置了一些div的宽度,高度和显示,但是高/宽设置没有被兑现。文本也被向下推。

http://jsfiddle.net/k7esv/

1)为什么当在table-row中设置height时,向下推文本,但当高度被移除时,它会将文本放在顶部?

2)为什么宽度/高度设置不能兑现?

3)为什么不设置保证金属性对它们有影响?

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

解决方法

1)这似乎是Firefox特有的渲染问题。设置div上的vertical-align属性会修复它。顶部,中间或底部都似乎工作。当没有高度但没有垂直排列时,我不明白FF在做什么?这可能是一个错误

2)宽度和高度都得到尊重,但它们受制表规则的约束。当表格没有足够的空间给每个单元格指定的宽度时,它将为具有更多内容的单元格提供更多的空间。这是你的例子发生了什么。如果你看下面我的例子,你将会看到,当父元素比表格单元格的宽度总和宽时,单元格会尊重宽度。高度应该始终有效(除了在上述FF渲染问题的情况下)。

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

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

猜你在找的CSS相关文章