Question

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

限制是我无法设置数据限制，因为它们是动态的，有时候有20个帖子的数据，但有时只有2个帖子。如您所见，所有数据必须垂直均匀地分成2列，如下图所示的红色计数器文字。

由于

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

Answer 1

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

浮动：浮动列表项，同时将它们的宽度设置为父ol的一半。代码看起来像：

ol {
    width: 400px;
}

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

列：使用新的CSS3 columns属性获取列。请记住，只有Webkit，Mozilla和Opera浏览器支持这一点;从9 beta开始的IE还没有这个。代码看起来像：

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

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

请参阅此处的工作示例：http://jsfiddle.net/sVEE5/

Answer 2

根据@Yi Jiang的建议纠正。旧版本

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

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

2 个答案:

原始答案