css - CSS列サイトマップナビゲーション

Question

ページのフッターに高さ制限のあるサイトマップを作成し、下の画像のようにリンクを配置したいと思います。サイトはCMSであるため、これは柔軟である必要があります。出来ますか？

どんな助けでも大歓迎です。

Answer 1

こんにちは、使用できますこれには、column-countプロパティを使用できます。

HTML

<div id="multicolumn1">
<div class="child">Link 1</div>
<div class="child">Link 2</div>
<div class="child">Link 3</div>
<div class="child">Link 4</div>
<div class="child">Link 5</div>
<div class="child">Link 6</div>
<div class="child">Link 7</div>
<div class="child">Link 8</div>
<div class="child">Link 9</div>
 <div class="child">Link 10</div>
 <div class="child">Link 11</div>
 <div class="child">Link 12</div>

Css

div#multicolumn1{
    -moz-column-count: 3;
    -moz-column-gap: 33%;
    -webkit-column-count: 3;
    -webkit-column-gap: 33%;
    column-count: 3;
    column-gap: 33%;
}
.child{
    height:20px;
}

ライブデモhttp://jsfiddle.net/pMbtk/397/

注：IEでは機能しません。

IEの場合、次のJavaScriptを使用できます。CSS3-複数列のレイアウトのデモンストレーション