CSS列站点地图导航

Question

我希望在页面的页脚中有一个站点地图，它有一个高度限制并安排链接，如下图所示。该网站是CMS，所以这必须是灵活的。可能吗？

感谢任何帮助。

Answer 1

您好，您可以使用为此，您可以使用列数属性：

<强> 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