将 div 从上到下对齐，然后从左到右对齐

Question

我有一个宽度 200 像素和高度 500 像素的主要分区。根据一些事件，我需要将宽度为 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

您想要实现的目标不能仅在 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;
}

Answer 2

<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 3

由于您已经知道MainDiv 和SubDiv 的尺寸，因此您也知道每列和每行中SubDiv's 的数量。如果您正在寻找纯 CSS 的解决方案，您可以考虑使用 position 属性。使用一些硬编码（不太动态）的 CSS 类，您可以通过这种方式实现它。我已经考虑了SubDivs 的3X3 矩阵。这只是向您建议一种不同的方法。

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

尝试在.SubDiv 中添加float:left;