如何创建一个 2 列设计，当第一列已满时，它会自动显示在第二列？答案

【问题标题】：How to create a 2 column design where when the first column is full, it will automatically display on the second column?如何创建一个 2 列设计，当第一列已满时，它会自动显示在第二列？
【发布时间】：2010-09-29 14:01:31
【问题描述】：

如何创建 2 列设计？当第一列数据显示满时，会自动显示在第二列吗？

限制是我不能为数据设置限制，因为它们是动态的，这意味着有时会得到 20 个数据帖子，但有时只能得到 2 个帖子。如您所见，所有数据必须垂直均匀地分成两列，如下图所示。

谢谢

http://img580.imageshack.us/img580/5595/readmoreq.jpg

【问题讨论】：

在服务器端执行（例如|ul with odd|ul with even|）

标签： html css

【解决方案1】：

两个选项 - 根据用户的浏览器支持使用它们。

浮动：浮动列表项，同时将它们的宽度设为父 ol 的一半。代码如下所示：

ol {
    width: 400px;
}

ol li {
    width: 190px;
    margin-right: 10px;
    float: left;
}

列：使用新的 CSS3 列属性来获取列。请记住，只有 Webkit、Mozilla 和 Opera 浏览器支持此功能； IE 9 beta 还没有这个功能。代码如下所示：

ol {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

请注意，两者不会产生完全相同的结果。您可能还需要考虑使用诸如Modernizr 之类的脚本来检测对 CSS3 列的支持，然后再使用它，并为不支持的旧浏览器提供回退。

在此处查看一个工作示例：http://jsfiddle.net/sVEE5/

【讨论】：

【解决方案2】：

根据@Yijiang的建议更正。下面是旧版本

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
    <style type="text/css">
        ul { width: 100px; float: left; border: 1px solid red; }
    </style>
    <script type="text/javascript">
    $(window).load(function(){
        var firstCol = $('#first'), 
            secondCol = $('#second');

        while(firstCol.height() < secondCol.height()){
            firstCol.append(secondCol.children().first());
        }
    });
    </script>
</head>
<body>
    <ul id="first">
        <li>Content 1</li>
        <li>Content 2</li>
        <li>Content 3</li>
        <li>Content 4</li>
        <li>Content 5</li>
        <li>Content 6</li>
        <li>Content 7</li>
        <li>Content 8</li>
        <li>Content 9</li></ul>
    <ul id="second"></ul>   
</body></html>

如果填充 col1，然后将元素移动到 col2。奇数元素会使 col2 更高，这就是我向后做的原因

原答案

这应该与旧浏览器兼容

<html>
<head>
<style>
    #col1, #col2 { border: 1px solid red; float:left; }
</style>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
$(document).ready( function() {
    var c1 = $('#col1')[0];
    var c2 = $('#col2')[0];
    while (c1.clientHeight < c2.clientHeight) {
        var elm = $('#col2 *:last')[0];
        c1.innerHTML = elm.outerHTML + c1.innerHTML;
        elm.outerHTML='';
    }
} );
</script>
</head>
<body>
<div id="col1">
</div>
<div id="col2">
    <div>content01</div>
    <div>content02</div>
    <div>content03</div>
    <div>content04</div>
    <div>content05</div>
    <div>content06</div>
    <div>content07</div>
</div>
</body>
</html>

【讨论】：

再次检查您的代码 - 它正在无限循环中运行：jsfiddle.net/vrtam。另外，你为什么要使用移动元素的方法，而不是 jQuery 自己的操作方法？
没有无限循环 :S .. 那个方法是因为我对 jQuery 不太了解
@y34h 你用的是什么浏览器？ outerHTML 在 Firefox 中不起作用（这就是代码将进入无限循环的原因，因为附加的只是 undefined）。见：quirksmode.org/dom/w3c_html.html
@y34h 查看兼容性图表 - Webkit 和 Trident 都支持此功能，但 Mozilla 不支持。另外，你看过我在那里为你修复的代码吗？
是的，我看到了，谢谢。只有两件事：在您的版本中，第二列从 19 变为 10；如果你放 21 个元素 col2 更高^^