Question

我有一个动态列表，我需要使用CSS很好地排列成2列，而且我有一段非常糟糕的时间。

与此类似的标记：

<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>

当我简单地给出li的宽度并将它们浮动到左侧时，它们会清除有趣并最终格式化为类似于：

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

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

澄清更新 - 列表也可能出现在数据库中，如下所示：

<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>

要求格式化：

A is for apples that   B is for boat
grow on trees          C is for cupcake
D is for dishes -      E is.....
that sure don't wash
themselves

/澄清

我的备份计划：订单不是特别相关，所以我尝试将列表分成两半，然后打印出两个独立的<ul>中的两列，一个已定义的宽度，但每个<li>具有可变高度，数据库返回2-15个项目之间，使用该方法，列的底部看起来不均匀。如果可能的话，我宁愿找一个更好的选择：/

Answer 1

这是你追求的吗？

http://jsfiddle.net/Mutant_Tractor/fe2as/

修改

JQuery方法：

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

您需要调整它以允许多行相继出现的实例...

Answer 2

我担心，在IE拥有css3多列支持之前，你运气不好。

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

Answer 3

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

基本上，它会向左或向右浮动元素（通过带有left和right类的CSS），具体取决于当前哪个列更短。

值得注意的是，此代码是在View对象中声明的，因此第一个this引用包装元素（在您的情况下为<ul>）。

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")
        }
    });
}

Answer 4

您需要使用a definition list。

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

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

4 个答案: