Css UL/LI，向下流动，用完空间后向右流动

我正在尝试创建一些用于页脚导航的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;
}

主页


目录
第一类
第2类
第3类
第4类
第5类


公司
第一公司
公司2
公司3
公司4
公司5

.我的{
高度：130像素；
浮动：左；
}
.我的女儿{
浮动：左；
清除：左；
列表样式：无；
}

上述方法有效，但当它到达ul底部时，它会继续运行。显然，溢出：隐藏使其不可用，但这不是我想要的。我希望它在右边开始一个新的列

---

有什么办法可以改进吗？

不幸的是，你想做什么，纯CSS是做不到的。您可以将javascript和CSS结合使用。

对于列，您可以使用CSS3，尽管它在较旧的浏览器或IE9 RC中不起作用

#yourfooter
{
column-count: 3;
}

---

如果你的目标群体不太可能有任何支持CSS3的现代浏览器，我个人会选择简单的捷径，制作几个div来保存内容。

我找到了一种方法。。。仅CSS，使用第n个子选择器。（这在旧浏览器上可能会有问题）

请参见此处的演示：

以下是相关的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 */
}

---

现在有一个CSS唯一的解决方案来解决这个问题。CSS3的flex-box模型仅通过CSS就达到了预期的效果

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

这将使

ul

的内容（li标签）从上到下流动，然后在填充

ul

的高度后从左到右流动

---

最新的浏览器Chrome、Opera、Firefox和IE11以及Safari和（带-webkit-prefix）和IE10（带-ms-prefix）都支持此功能。

感谢您的回复。我认为这可能是事实，但我希望有一个纯粹的CSS解决方案。我可能会使用一些PHP来计算添加了多少，给它们一个固定的高度。文本导航的全部目的是为了适应那些缺少javascript之类东西的浏览器。啊-是的，PHP应该是一个家庭版。干杯，谢谢。很高兴知道这在将来会更容易！我将注意到，此解决方案在每列中使用特定数量的项。如果您仍然希望它垂直流动以填充任意高度，然后换行到下一列，我不知道如何做到这一点。