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

你想要实现的目标不能仅仅在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类，您可以通过这种方式实现它。我考虑了3X3的{{1}}矩阵。这只是建议你采用不同的方法。

<强> JSFIDDLE DEMO

<强> HTML

SubDivs

<强> CSS

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

Answer 4

尝试在float:left;

中添加.SubDiv

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

4 个答案: