Question

我正在尝试为页脚导航创建一些HTML / CSS。

我想要的是主要部分作为单独的ul，然后每个子部分作为li。

ul将具有固定的高度，其中li向内流动。如果他们没有空间下楼，我希望他们再从右侧开始。

我虽然这很简单，但尝试使用以下HTML / CSS

<ul class="my_ul">
<li class="bold"> Home </li>
</ul>
<ul class="my_ul">
<li class="bold"> Catalogue </li>
<li> Category 1 </li>
<li> Category 2 </li>
<li> Category 3 </li>
<li> Category 4 </li>
<li> Category 5 </li>
</ul>
<ul class="my_ul">
<li class="bold"> Company </li>
<li> Company 1 </li>
<li> Company 2 </li>
<li> Company 3 </li>
<li> Company 4 </li>
<li> Company 5 </li>
</ul>


.my_ul {
height: 130px;
float: left;
}
.my_ul li {
float: left;
clear: left;
list-style: none;
}

上述工作，除了当它到达ul的底部时它继续前进。显然溢出：隐藏使它消失，但这不是我想要的。我希望它在右边开一个新列。

我有什么想法可以改善这个？

Answer 1

对于列，您可以使用CSS3，但它不适用于旧浏览器或IE9 RC。

#yourfooter
{
column-count: 3;
}

如果您的目标群体不太可能拥有任何支持CSS3的现代浏览器，我会亲自采取简单的快捷方式，让几个div持有内容。

Answer 2

现在有一个仅针对此问题的CSS解决方案。 CSS3的弹性盒模型仅通过CSS实现了预期的效果。

ul {
    display: flex;
    flex-flow: column wrap;
}

http://jsfiddle.net/2Dr6E/

这会使ul的内容（li标签）从上到下流动，然后在填充ul＆＃39;之后从左到右流动。高度。

最近的浏览器Chrome，Opera，Firefox和IE11以及Safari和（带-webkit-前缀）和带有（-ms-前缀）的IE10都支持此功能。

Answer 3

不幸的是，你要做的是，纯粹的CSS无法做到。你可以结合使用javascript和CSS。

Answer 4

我找到了一种方法......仅限CSS，使用nth-child选择器。（这可能会在旧浏览器上出现问题）。

请参阅此处的演示： http://jsfiddle.net/MYB7g/3/

这是相关的CSS：

ul {
    white-space: nowrap;
    margin: 0;
    padding: 0;
    margin-bottom: 100px;  /* space the two demos apart */
}

li {
    width: 180px;
    height: 30px;
    background-color: rgba(0,0,255,.5);
    color: white;
    padding: 5px;
    margin: 0px;
    border-radius: 8px;
    font-family: Helvetica;
    font-size: 24px;
    line-height: 30px;
    display: inline-block;
}


/******************************************/
/*  N = 2                                 */
/******************************************/

ul.rows2 {
    margin-left: 180px; /* li.width * (N-1) */
}

ul.rows2 li {
    margin-left: -180px; /* -(li.width * (N-1)) */
}

ul.rows2 li:nth-child(even) {
    background-color: rgba(255,0,255,.5);
    position: relative;
    top: 50px;        /* li.height + vertical spacing */
    left: -195px;     /* -(li.width + horizontal spacing */

    margin-left: 0px;
}

/******************************************/
/*  N = 3                                 */
/******************************************/

ul.rows3 {
    margin-left: 360px; /* li.width * (N-1) */
}

ul.rows3 li {
    margin-left: 0px;
}

ul.rows3 li:nth-child(3n+1) { /* top */
    margin-left: -360px; /* -(li.width * (N-1)) */
}

ul.rows3 li:nth-child(3n+2) { /* second */
    background-color: rgba(255,0,0,.5);
    position: relative;
    top: 50px;        /* li.height + vertical spacing */
    left: -195px;     /* -(li.width + horizontal spacing */
}

ul.rows3 li:nth-child(3n+3) { /* bottom */
    background-color: rgba(255,0,255,.5);
    position: relative;
    top: 100px;       /* 2*(li.height + vertical spacing */
    left: -390px;     /* -2*(li.width + horizontal spacing */
}

UL / LI向下流动，然后在它用完房间时向右流动

4 个答案: