Gecko 1.9 的 CSS3 列平衡

Question

我在使用 CSS 3 列样式时遇到很多困难。我使用的是 Firefox 3.6，它应该支持 -moz-column 布局。

我有一个项目列表，我试图将它们呈现为两列，从上到下。为了帮助我的内部排序算法，第一个列表项是子列表。

我的 css 使用此

.container{
  -moz-column-width:635; //slightly wider than the list item we're displaying
  -moz-column-rule:1px solid;
}
.sub_list{
  width:50%;
  display:list-item;
}
.item{
  overflow:hidden;
  padding:0;
  margin:0;
  display:list-item;
  width:634px;
}

不幸的是，我的列表显示为单列列表或多列布局，其中每个

都标记为 float:left; 但不是足够了，因为它是这样排序的：

1  2
3  4
5  6

这不是我需要的，而且它看起来绝对丑陋，因为列表项 1 本身就是一个列表。

我发现的所有示例似乎都垂直排序列表项，并且它们不使用任何附加标签： http://weblogs.mozillazine.org/roc/archives/2005/03 /gecko_18_for_we.html 和/或 https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions 。

有人能告诉我我做错了什么吗？也许我无法正确理解布局引擎。

Answer 1

有人要求我正式“回答”这个问题，所以我将我的答案从评论转移到答案。

经过近一整天的研究和修改，我终于在发布问题后大约五分钟找到了答案。

我删除了 .item 的所有显示/位置相关样式。我不知道它们中的任何一个是否实际上与列格式兼容。您必须尝试一下或询问更有知识的人。

我给了 .container 一个固定的高度。