CSS：基于高度浮动（按列）答案

【问题标题】：CSS : float based on height ( column wise)CSS：基于高度浮动（按列）
【发布时间】：2014-12-30 16:03:39
【问题描述】：

我正在设计一个菜单，其中列表项浮动应该是按列（逐行）而不是按行（并排）的。例如，

目前我有这样的菜单，

我想改变这样的布局，

我正在使用以下代码作为列表项，

.mnu-third li  {
    width:150px;
    height:15px;
    display:block;
    float:left;
}

这里，如果列表项达到了菜单的一定高度限制，那么应该从下一列开始。

请帮忙...

编辑：Here is my code 转到顶级类别和子子类别...

【问题讨论】：

标签： html css

【解决方案1】：

只需将 CSS 列添加到您的 ul 并使用 height 控制它。无需更多。

ul {
    height: 120px;
    -webkit-columns: 3; -moz-columns: 3; columns: 3;
}

<ul>
    <li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li>
    <li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li>
</ul>

【讨论】：

CSS Columns browser support。有趣的是，除了 Opera mini 之外，唯一支持标准 columns 属性的浏览器是 IE10 / 11。
是的@misterManSam。 IE 最近在标准上大肆挥霍！想知道需要多长时间才能摆脱供应商前缀并使事情标准化！

【解决方案2】：

在css下面使用

ul {
    display: flex;
    flex-flow: column wrap;
    height: 150px;
    width: 150px;
}
li {
  display: inline-block;
}

根据您的要求更改高度和宽度。

【讨论】：