将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 并添加任意数量