将可变数量的 div 浮动到左/右列

Question

我有一种情况，我需要能够根据用户输入获取 div 并将它们浮动到左列或右列。所以，我不控制 DOM 中 div 的顺序，这意味着可能有 2 个 div 向左浮动，然后是 5 个 div 向右浮动，然后是 10 个 div 向左浮动，依此类推。

这里是例子

HTML

<div class="left" style="background-color:#D8D8D8;">aa</div>
<div class="right" style="background-color:#C4BD97;">bb</div>
<div class="right" style="background-color:#8DB3E2;">dd</div>
<div class="right" style="background-color:#E5B9B7;">ee</div>
<div class="full" style="background-color:#D7E3BC;">ff</div>
<div class="right" style="background-color:#CCC1D9;">gg</div>
<div class="left" style="background-color:#FBD5B5;">cc</div>
<div class="right" style="background-color:#D8D8D8;">hh</div>
<div class="right" style="background-color:#C4BD97;">ii</div>
<div class="right" style="background-color:#8DB3E2;">kk</div>
<div class="left" style="background-color:#E5B9B7;">ll</div>
<div class="full" style="background-color:#D7E3BC;">mm</div>
<div class="right" style="background-color:#CCC1D9;">nn</div>
<div class="left" style="background-color:#FBD5B5;">jj</div>

CSS

.left {float:left;clear:left;}
.right {float:right;clear:right;}
.full {float:none;clear:both;}

这是一个小提琴：http://jsfiddle.net/nNL2V

在示例中，我想折叠 ll 和 cc 之间的空格，使其显示在正下方。解决方案必须支持IE8及以上。

我还应该补充一点，我曾考虑过使用左右 div 进行浮动列方法，但在我的情况下它不起作用，因为全宽 div 使用 clear:both 散布在浮动部分之间。

Answer 1

您能否将width 分配给.left div？如果是这样，您可以这样做：

.left {
    display: inline-block;
    width:50%;
}

.right {float:right; clear: right;}

Fiddle

Answer 2

我不确定您如何使用纯 CSS 来做到这一点，但所涉及的 JQuery 将是微不足道的。它基本上是根据 left 或 right 类将 DIVs 移动到左右浮动容器中。

再多一点 JQuery，你得到的列不会受到与接受的答案相同的大小调整问题的影响......

HTML

<div id="src">
    <div class="left" style="background-color:#D8D8D8;">aa</div>
    <div class="right" style="background-color:#C4BD97;">bb</div>
    <div class="right" style="background-color:#8DB3E2;">dd</div>
    <div class="right" style="background-color:#E5B9B7;">ee</div>
    <div class="full" style="background-color:#D7E3BC;">ff</div>
    <div class="right" style="background-color:#CCC1D9;">gg</div>
    <div class="left" style="background-color:#FBD5B5;">cc</div>
    <div class="right" style="background-color:#D8D8D8;">hh</div>
    <div class="right" style="background-color:#C4BD97;">ii</div>
    <div class="right" style="background-color:#8DB3E2;">kk</div>
    <div class="left" style="background-color:#E5B9B7;">ll</div>
    <div class="full" style="background-color:#D7E3BC;">mm</div>
    <div class="right" style="background-color:#CCC1D9;">nn</div>
    <div class="left" style="background-color:#FBD5B5;">jj</div>
</div>

<div style="clear:both;"></div>

<div id="dest"></div>

CSS

.left, .right { width:100%; }
.full { width:100%; clear:both; }
.leftCol { float:left; clear:left; width:50%; }
.rightCol { float:right; clear:right; width:50%; }

JS

var cleared = true;
var left;
var right;
$("#src>.left, #src>.right, #src>.full").each(function(){
    var el = $(this);
    if(el.hasClass("full")) {
        cleared = true;
        $("#dest").append(el);
    } else {
        if(cleared === true) {
            left = $("<div class='leftCol'></div>");
            right = $("<div class='rightCol'></div>");
            $("#dest").append(left).append(right);
            cleared = false;
        }
        if(el.hasClass("left")) {
            left.append(el);
        } else if(el.hasClass("right")) {
            right.append(el);
        }
    }
});

小提琴

http://jsfiddle.net/RcvHW/1/