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 - Multi Column Layout Demonstration