從上到下對齊div，然後從左到右

Question

我有一個寬度爲200px，高度爲500px的主分區。根據一些事件，我需要在主要部門中添加寬度爲50px和高度爲50px的子部分。我需要將它從左上方添加到下方並向右流動。

|---------------| 
|  |  | 
| 1 | 4 | 
|-------|-------| 
|  |  | 
| 2 | 5 | 
|-------|-------| 
|  |  | 
| 3 | 6 | 
|-------|-------| 

我試過這些CSS，但它不工作。

.SubDiv { 
    height: 50px; 
    width: 50px; 
    background: red; 
} 

.MainDiv { 
    max-height: 200px; 
    height: 200px; 
    width: 200px; 
    background: blue; 
    min-width: 100px; 
    direction: inherit; 
} 

<div> 
    <div id="SimulationPage"> 
     <div id = "ParentDiv" class="MainDiv"> 
     </div> 
    </div> 

    <input type='button' id = "adddiv" value='add div' /> 
</div> 

$(document).ready(function() { 
    $('#adddiv').bind('click', function (eventargs) { 
     $("#ParentDiv").append('<div class="SubDiv"> </div>'); 
    }); 
}); 

有人可以幫助我實現我想要的。

Answer 1

<style> 
    .MainDiv { 
     max-height: 200px; 
     height: 200px; 
     width: 200px; 
     background: blue; 
     min-width: 100px; 
     direction: inherit; 
    } 

    .DivHolder { 
     width: 50px; 
     height: 150px; 
     float: left; 
    } 

    .SubDiv { 
     height: 50px; 
     width: 50px; 
     background: red; 
    } 
</style> 

<div id="SimulationPage"> 
    <div class="MainDiv"> 
     <div class="DivHolder" id="Row1"></div> 
     <div class="DivHolder" id="Row2"></div> 
    </div> 
</div> 

<script language="javascript"> 
$(document).ready(function() { 
    var col = 1; 
    var row = 1; 
    $('#adddiv').bind('click', function (eventargs) { 
     if(row <= 3) 
     { 
      $("#Row"+col).append('<div class="SubDiv"> </div>'); 
      row = row + 1; 
     } 
     else 
     { 
      col = col + 1; 
      row = 1; 
      $("#Row"+col).append('<div class="SubDiv"> </div>'); 
      row = row + 1; 
     }  
    }); 
}); 
</script> 

您可以動態去，並添加DivHolders，並添加你想要儘可能多的

Answer 2

嘗試在.SubDiv

Answer 3

加入float:left;既然你已經知道的MainDiv和SubDiv的尺寸，你也每列和每行都知道SubDiv's的編號。如果您正在尋找僅用於CSS的解決方案，則可以考慮使用position屬性。通過一些硬編碼（動態性較低）的CSS類，您可以通過這種方式實現它。我考慮過3X3矩陣SubDivs。這只是爲您提供一種不同的方法。

JSFIDDLE DEMO

HTML

<div class="MainDiv"> 
    <div class="SubDiv">1</div> 
    <div class="SubDiv">2</div> 
    <div class="SubDiv">3</div> 
    <div class="SubDiv">4</div> 
    <div class="SubDiv">5</div> 
    <div class="SubDiv">6</div> 
</div> 

CSS

.SubDiv { 
    height: 50px; 
    width: 100px; 
    background: red; 
} 
.MainDiv { 
    max-height: 200px; 
    height: 150px; 
    width: 200px; 
    background: blue; 
    min-width: 100px; 
    direction: inherit; 
    padding : 3px; 
} 
.SubDiv:nth-child(4n),.SubDiv:nth-child(4n)+div,.SubDiv:nth-child(4n)+div+div{ 
    position : relative; 
    left : 100px; 
    top : -150px; 
} 

Answer 4

你想達到不能在CSS做純粹是因爲什麼你在父類中有未知數的孩子，並且將它們左右浮動，你必須找到最中間的孩子並從那裏浮起來。

如果jQuery的取悅你（因爲你已經在它標記這個問題）

here is a solution for dynamic count with jQuery

jQuery的使用：

var count = $(".MainDiv").children().length; /*get total childs */ 
    var mid_child = Math.ceil(count/2) + 1; /* find mid child */ 
    var x = 1; /*parameter to set negtaive margin, to push right float on top*/ 
    var current_div_number = mid_child; /* div number to set margin */ 

    /*assign class name to 2nd half childs, to float them right 
    through css, can be done through jQuery too!!*/ 
    $(".MainDiv .SubDiv:nth-child(n+" + mid_child + ")").addClass("mid"); 


    /* check each .mid class and assign negative margin-top*/ 
    $(".MainDiv .mid").each(function (index) { 
     $(".MainDiv .SubDiv:nth-child(" + current_div_number + ")").css('margin-top', -(mid_child * 50) + (50 * x) + 'px'); 
     x = x + 1; 
     current_div_number = current_div_number + 1; 
    }); 

CSS

.MainDiv > div.mid { 
    float:right; 
    background: green; 
}