从上到下对齐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; 
}