將可變數量的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及更高版本。

我還應該補充一點，我曾經考慮過用左右分區做浮動列方法，但由於使用clear的全寬div，它不能在我的情況下工作：兩者都穿插在浮動部分之間。

Answer 1

我不確定你如何用純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> 

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

FIDDLE

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

Answer 2

你能分配width到.left的div？如果是這樣，你可以這樣做：

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

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

Fiddle