HTML5:左侧“display:table-cell”元素中的图像按下右侧元素中的内容

时间:2012-03-17 15:56:35

标签: css html5 layout

鉴于这个小小提琴:http://jsfiddle.net/5Sw3h/8/

我左边有一个导航面板,中间有一个内容面板,右边的面板也有一点空间。这些是使用“display:table,display:table-cell”语义放置的。

我目前正在经历将内容放在左侧面板中,它似乎将内容面板中的内容压缩了一些,主要是针对那里的图像。然而,似乎将内容放得有点普遍。

我已经尝试过在很多元素上将填充设置为0(正如我首先想到的那样),然后我尝试在内容框上进行垂直对齐,一些相对定位定义为“顶部”。但没有什么真正帮助......

我知道我一定忽略了一些显而易见的事情,就是找不到它。

任何人都可以帮我找到我所缺少的东西吗?

2 个答案:

答案 0 :(得分:15)

如果您有display: table-cell,请添加vertical-align: top

vertical-align的初始值为baseline,导致错位。

答案 1 :(得分:0)

thirtydot已经提供了一个很好的答案。但是,您将在Safari和Opera中遇到一个新问题,因此您最好确保已将宽度设置为所有table-cell元素。另一个问题是IE 6/7中的显示表/表格单元支持,您可以在这里使用Tanalin编写的HTC脚本http://tanalin.com/en/projects/display-table-htc/