Css 将动态多行列表项浮动到两列中

我有一个动态列表，我需要使用CSS将它很好地排列成两列，我现在使用它非常糟糕

标记与此类似：

<ul>
<li>A is for apples</li>
<li>B is for bananas which are yellow in color</li?
<li>C is for cupcakes</li>
....
</ul>

A is for apples        B is for bananas which
                       are yellow in color
C is for cupcakes      D is for dirtbag

我需要格式化，以便将第三个li直接放在第一个li的下方-无论任何一个列表项的高度如何，如下所示：

A is for apples        B is for bananas which
C is for cupcake       are yellow in color
D is for dirtbag

每个李的文本都是从数据库中提取出来的，我无法控制每个文本的长度

澄清更新-列表也可能来自数据库，如下所示：

<ul>
<li>A is for apples that grow on trees</li>
<li>B is for boat</li>
<li>C is for cupcakes</li>
<li>D is for dishes - that sure don't wash themselves</li>
....
</ul>

/澄清

我的备份计划：顺序不是特别相关，因此我尝试将列表一分为二，并将两列打印在两个独立的

中，这两列以定义的宽度向左浮动，但每个

具有可变的高度，数据库返回2-15个项目，使用这种方法，柱的底部看起来并不均匀。如果可能的话，我宁愿找一个更好的选择：/

您需要使用

...   
B
是指黄色的香蕉

这就是你想要的吗

编辑

JQuery方法：

$('li').each(function(e) {
    $var = $(this).height();
    if ($var > 25) {
        $(this).addClass('second')
    } else {
        $(this).addClass('first')
    }
});

---

您需要对其进行调整，以允许多行一行接一行出现的情况…

在IE支持css3多列之前，恐怕您运气不好

---

当然，您可以使用它并为IE使用javascript解决方案（例如，jQuery有多列插件），但您的备份计划似乎是一个更简单的解决方案。

如果您愿意使用一些javascript，我使用以下代码为IE 9+解决同样的问题（这是所有的范围，所以我不能保证它将在旧的IE版本中工作）

基本上，它根据当前较短的列向左或向右浮动元素（通过带有

left

和

right

类的CSS）

值得注意的是，该代码是在视图对象中声明的，因此第一个

this

引用包装元素（在您的示例中是

）

alignContainers:function（）{
var thisView=this，
numOfElements=0；
此视图。$el.find（“>div”）.removeClass（“左-右”）
.each（函数（{
如果（this.offsetHeight！=0&&this.offsetWidth！=0）{
var leftHeight=0，
rightHeight=0；
thisView.$el.find（“>.left”）。每个（函数（）{
leftHeight+=此值。偏离视线；
});
thisView.$el.find（“>.right”）。每个（函数（）{
rightHeight+=此项。偏离视线；
});
if（numOfElements==0）{
$（this.addClass（“左”）.removeClass（“右”）；
}否则如果（左高<右高）{
$（this.addClass（“左”）.removeClass（“右”）；
}否则{
$（this.addClass（“right”）.removeClass（“left”）；
}
numOfElements++；
}否则{
$（this.removeClass（“左-右”）
}
});
}

不，不幸的是，只有当它是一个静态列表，但它是动态的时，它才起作用-两行可能偶尔出现在第一行，或者可能出现在第三行，或者有时根本不出现。然后你可以用JQuery来测量它-我将编辑上面的内容以显示这一点，我必须在第一行和第二行之间集成一个切换，并使用t的高度他之前试图覆盖或求出每列的高度之和，我可以想象，在15个

的集合上会变得非常复杂，可能仍然会产生与我的备份解决方案相同的问题，而我的备份解决方案的列底看起来很糟糕。不过，感谢你的想法-我可以看看这是否比我的备份解决方案更好lan。我不清楚这将如何帮助我解决包装问题-你能提供一些信息，说明我将应用于

、

和

标记的哪些样式来实现这一点吗？我已经忘记了多列，不幸的是，该网站的大部分流量来自IE，因此对于这个特定的实现来说，这不起作用。@Terri Ann我也这么认为，所以您只能使用备份解决方案或带有javascript回退的css3，css本身是行不通的。

<dl>
   ...   
   <dt>B</dt>
   <dd>is for bananas which are yellow in color</dd>
</dl>

$('li').each(function(e) {
    $var = $(this).height();
    if ($var > 25) {
        $(this).addClass('second')
    } else {
        $(this).addClass('first')
    }
});

alignContainers: function() {
    var thisView = this,
        numOfElements = 0;

    thisView.$el.find("> div").removeClass("left right")
    .each( function() {

        if (this.offsetHeight != 0 && this.offsetWidth != 0) {
            var leftHeight = 0,
                rightHeight = 0;

            thisView.$el.find(" > .left").each(function() {
                leftHeight += this.offsetHeight;
            });

            thisView.$el.find(" > .right").each(function() {
                rightHeight += this.offsetHeight;
            });

            if (numOfElements == 0) {
                $(this).addClass("left").removeClass("right");                            
            } else if (leftHeight < rightHeight) {
                $(this).addClass("left").removeClass("right");
            } else {
                $(this).addClass("right").removeClass("left");       
            }

            numOfElements++;

        } else {
            $(this).removeClass("left right")
        }
    });
}