2

我有一个菜单，我希望菜单的高度是固定的，并且想要垂直而不是水平地呈现菜单。即，我希望菜单在一定高度后在下一列中继续，以便没有空格。请看这个截图...

菜单屏幕截图

我希望“Admission Desk”菜单位于“Patient”菜单下方，然后是下一个菜单，依此类推......，所以不会显示空白......

这是我的CSS...

menurepository .submenudiv
{
    float: left;
    padding: 1px 3px 3px 2px;
    margin: 4px;
    text-align: center;
}
.menurepository .submenudiv h3
{
    color: #111111;
    font-size: 6pt;
    float: left;
    font-family: Tahoma;
    text-align: left;
}
.linkdiv
{
    clear: both;
}
.menurepository .submenudiv .linkdiv a
{
    color: #28A1E2;
    font-size: 7pt;
    clear: both;
    display: block;
    padding: 2px 0px;
    margin: 4px 4px 4px 0px;
    text-align: left;
    font-family: Tahoma;
    width: 100%;
}
4

2 回答 2

1

可以使用新的 css3 列计数规则 [http://www.w3schools.com/css3/css3_multiple_columns.asp] 执行此操作。根据 w3schools，这仅适用于现阶段的 Firefox/Chrome/Safari。对于 IE，菜单优雅地降级为一长列。IE 10 可能有效，但我无法验证。

您需要简化标记以使菜单列正常工作。有关工作示例，请参阅 [http://jsfiddle.net/sSwpZ/]。

于 2013-02-25T22:05:04.023 回答
0

FTColumnflow为您的问题提供了一个相当优雅的解决方案。

于 2013-02-25T07:25:24.803 回答