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

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

下面是一个例子

HTML

这是一把小提琴：

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

---

我还应该补充一点，我曾考虑过使用左div和右div来实现浮动列方法，但在我的例子中它不起作用，因为全宽div使用clear:这两个变量都散布在浮动部分之间。

我不确定如何使用纯CSS实现这一点，但所涉及的JQuery将是微不足道的。它基本上是根据

left

或

right

类将

DIV

s移动到左侧和右侧浮动容器中

再加上一点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>

JS

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

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

var cleared=true；
左var；
var权；
$（“#src>.left，#src>.right，#src>.full”）。每个（函数（）{
var el=$（本）；
如果（el.hasClass（“完整”））{
清除=真；
$（“#dest”）。追加（el）；
}否则{
如果（清除===真）{
左=$（“”）；
右=$（“”）；
$（“#dest”）.append（左）。append（右）；
清除=错误；
}
如果（el.hasClass（“左”））{
左。追加（el）；
}else if（el.hasClass（“右”））{
对。追加（el）；
}
}
});

拨弄

---

您能为

左侧的
div分配
宽度吗？如果是，您可以这样做：

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

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

我曾考虑过使用2列方法，但在我的情况下，这是行不通的，因为浮动div之间也可以有全宽div，可以清除：两列和左右列随后继续。我也会用这些信息来编辑这个问题。好吧，考虑到这个问题：，你想做的是折叠浮动div之间的空白，而浮动div显示在全宽div之间？（把
ll
移到
cc
下面）是的，这正是我想做的。我编辑了这个问题，用你的小提琴更好地勾勒出问题的轮廓，谢谢。看起来它可能有用。我会在实际的应用程序中使用它，看看我能想出什么。谢谢。我试过用更多的div，但在中间的100%div中效果不好。我想只要你不需要为右边的div指定50%的宽度，它就可以工作。如果指定正确的宽度，则很容易出现调整大小的问题。我正在使用修订的列方法更新我的答案，但没有调整问题的大小。事实上，只有当右div位于左div之前时，这种情况才起作用，如果您首先拥有所有左div，那么右div只能浮动到最后一个左div的级别：
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);
        }
    }
});

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

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