问题描述
|
我在使用CSS 3列样式时遇到很多困难。我使用的是Firefox 3.6,该版本应支持-moz-column布局。
我有一个项目列表,我想在2列中从上到下呈现它们。为了辅助我的内部排序算法,第一个列表项是子列表。
我的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;
}
不幸的是,我的列表显示为单列列表或多列布局,其中每个ѭ1都标记为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。
有人可以告诉我我做错了什么吗?也许我无法正确理解布局引擎。
解决方法
有人要求我正式“回答”这个问题,以便将我的回答从评论移到答案。
经过将近一整天的研究和修改,我终于在发布问题大约五分钟后修改了答案。
我删除了.item的所有与显示/位置相关的样式。我不知道它们是否实际上与列格式兼容。您将不得不对此感到困惑,或者问一个更懂行的人。
我给了.container一个固定的高度。