display：div中的表不像表那样显示

Question

我有您在图片中看到的问题。 那是一个三列的div。 该div具有display：table属性，每列均具有display:table-cell属性。 如您所见，问题在于，左列和右列是在中间列完成内容时开始其内容的，而它们应该从顶部开始作为中间列开始书写。

我不知道为什么会这样，因为在其余的CSS中与其他任何规则都没有冲突。 在其他示例中，我已经看到不必定义表列或表行来获得该样式。

我应该如何声明div以获取所需的结构？

这是代码： http : //jsfiddle.net/3fMM3/2/

Answer 1

您不需要那里的表，也不需要制作put display：table。

只需使用CSS样式进行三列布局，这就是您想要实现的外观。

检查此链接，例如：

http://matthewjamestaylor.com/blog/perfect-3-column.htm

Answer 2

这是一个工作示例： http : //jsfiddle.net/NyqGQ/1/

注意“ border-collapse”属性，以合并容器的边框和子边框。

Answer 3

尝试将vertical-align属性设置为表格单元格的顶部。

.your-table-cells
{
    vertical-align:top;
}