使用CSS设置列表的地图

Question

我有一个Map<Category, List<Link>>我正在我的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%;
}