菜单中的固定高度和重复列 - CSS

Posted 2023-03-06

【中文标题】菜单中的固定高度和重复列 - CSS

【英文标题】：Fixed height and repeating columns in menu - CSS

【发布时间】：2013-02-06 08:32:10

【问题描述】：

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

我希望“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%;

【问题讨论】：

嗨 Naveed Butt，您可以将下拉菜单上传到 (jsfiddle)[jsfiddle.net/]，以便我们更清楚。

这里是小提琴上的链接jsfiddle.net/2LUYD/7

【参考方案1】：

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

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

【参考方案2】：

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