2

メニューの高さを固定し、メニューを水平ではなく垂直にレンダリングしたいメニューがあります。つまり、メニューを特定の高さの次の列に続けて、空のスペースがないようにしたいのです。このスクリーンショットを見てください...

メニュー スクリーンショット

「受付」メニューを「患者」メニューの下に、その次のメニューを…というように、空欄が表示されないようにしたいのですが…

これが私の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 の場合、メニューは 1 つの長い列に適切に分解されます。IE 10 は動作する可能性がありますが、それを確認することはできません。

メニュー列を機能させるには、マークアップを単純化する必要があります。実際の例については、[http://jsfiddle.net/sSwpZ/] を参照してください。

于 2013-02-25T22:05:04.023 に答える
0

FTColumnflowは、問題に対してかなり洗練されたソリューションを提供します。

于 2013-02-25T07:25:24.803 に答える