css - 类别的分区列表使得子类别最终不会在两列之间中断

Question

我想达到这样的结果:

我有一个包含类别列表的列表集合。类别可以有数量可变的子类别。

子类别后面应该跟类别。如果子类别列表大于列中可以容纳的内容，则应显示在下一列中。

我尝试使用 -webkit-column-count 它将我的列表分成几列，但在列之间打破了子类别列表

下面是查看代码

@if (Model.Categories.Count > 0)
{
<ul>
foreach (var category in Model.Categories)
{

    <li class="cat-heading">
        <a href="@Url.RouteUrl("Category", new { Name = category.Name })">@category.Name</a>
    </li>
    if (category.SubCategories.Count > 0)
    {
        foreach (var subcat in category.SubCategories)
        {
            <li class="sub-cat">
                <a href="@Url.RouteUrl("Category", new { Name = subcat.Name })">@subcat.Name</a>
            </li>
        }
    }
</ul>
}

对于实现预期结果的任何建议，我们将不胜感激。

Answer 1

您可以使用 CSS flexbox 。仅IE10+等新浏览器支持。请注意 IE10 中的 flexbox CSS is different .

类别容器的 CSS:

div {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    height: 240px
}

如果您需要支持旧浏览器，我认为唯一的方法是通过 JavaScript。

See this sample tested in Chrome and Firefox