使用 CSS 设置列表的样式图

Question

我有一个 Map>，我在 jsp 中对其进行迭代：

<c:forEach var='entry' items='${categoryToLinkMap}'>
  <div class="category_section">
    <h2>${entry.key.name}</h2>
    <ul>
      <c:forEach var='item' items='${entry.value}'>
        <li>
          <a href="${item.href}">${item.label}</a>
        </li>
      </c:forEach>
    </ul>
  </div>
</c:forEach>

使用以下 CSS

.category_section {
  float: left;
  width: 300px;
  height: 200px;
}

我想要实现的水平最多为 3 个部分，任何比下面包裹的还要多。我的 CSS 按照我想要的方式工作，但有一个缺点是我必须设置高度，否则 div 部分会到处都是。如果我设置高度并且类别包含许多项目，则链接会重叠。

使用 CSS 实现此目的的最佳方法是什么？对不同方法有什么想法吗？我对前端的东西很陌生，所以如果可以做得更好，请告诉我。

编辑：这是我想要做的事情的快速模型：

Answer 1

另一种方法是使用嵌套 UL，并将层次结构中第一个 UL 的 li 向左浮动。
在您的代码中使用clearfix css hack来自动展开浮动div：

 .clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}