Question

我正在尝试构建一个子导航菜单，我决定使用display: table。

这是一个水平子菜单，有4列，每列有不同数量的链接。我需要做的是在每一列中显示一个链接，除了我刚刚提到的那些链接，在底部对齐，如下所示：

first column | second column
             |
link1        | link1
link2        | link2
link3        | link3
             | link4
             |
bottom link  | bottom link

重要的是底部链接是垂直对齐的。

我在jsfiddle中重新创建了整个事物： http://jsfiddle.net/skn2dshv/7/

除了不能正常工作之外，其中一个主要问题是它在firefox和chrome之间的表现不同。在Firefox上，底部链接显示在table-cell容器内，应该是，而在Chrome上则显示在外面。

我也看过这个：http://davidwalsh.name/demo/table-cell-position-absolute.php 但仍然无法弄清楚我的代码中有什么问题。

Answer 1

试试这个：

#gallery-submenu .dropdown-column .all-link {
    top: 100%;
    position: absolute;

    text-transform: uppercase;
}

它会将您的链接置于column-links-wrapper的所有100％高度的末尾。 jsfiddle Demo

如果你想要所有链接，你应该给column-links-wrapper一个静态高度。 jsfiddle Demo

表格单元格，Firefox和Chrome中的绝对定位

1 个答案: