css - 当盒子的高度受到限制时，在新行上继续列出

Question

我目前正在进行菜单设计，并且一直在摆弄一些不同的布局和技术。目前我正在查看带有包含链接的扩展框的悬停菜单设计。唯一的问题是因为我已将框设置为max-height: 400px;它意味着当前我创建的任何列表，例如。<li>1</li><li>2</li>等只是继续沿着盒子向下并在盒子外面而不是到下一行。任何人都知道如何强制它向右移动并表现得好像它正在开始一个新列表？

Answer 1

使用 CSS3column-count属性，这会将内容分成 3 部分，支持尚不确定，但这将是您正在寻找的完美方法

演示

div {
    background: #eee;
    height: 120px;
    column-count:3;
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
}