将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>');
    });
});

能否有人帮助我实现我想要的。

- Sujith Kp

---

你是在寻找纯 CSS 解决方案还是 jQuery+CSS 解决方案？如果用户添加了元素，这些元素将如何排列？（1）两个块（2）三个块（3）四个块……如果一个 200 像素宽的盒子里放两个宽度为 50px 的块，则无法填满该盒子。 - Salman A

你不能使用表格吗？ - sp00m

@SalmanA：我正在寻找仅使用CSS的解决方案。 - Sujith Kp

@sp00m：不，我不想使用表格。 - Sujith Kp

@SujithKp：如果你有动态数量的div，没有jQuery是无法实现的！ - NoobEditor

Answer 1

你想要实现的目标无法仅通过CSS完成，因为你在父类中有未知数量的子元素，并且要将它们向右或向左浮动，你必须找到最中间的子元素并从那里开始浮动。

如果你喜欢jQuery（ 而且既然你已经在问题中打了这个标签 ）

这里有一个使用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;
}

- NoobEditor

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并根据需要添加任意多个。

- PHP Noob

---

这种方法适用于您已经知道有多少个部分。在我的情况下，子部分是在用户单击按钮时添加的。 - Sujith Kp

DIV的数量有限制吗？还是只是填充你的块？ - PHP Noob

用户可以在主 div 中添加最多 6 个子 div。 - Sujith Kp

他们往左边去了吗？那里有限制吗？ - PHP Noob

Answer 3

既然您已经知道了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;
}

- Niranjan Borawake

Answer 4

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

- untitled