javascript - 自动将子 div 从第一个父 div 转移到第二个父 div

Question

我创建了两个父级 <div> .在第一个 parent 里面 <div>我写了一个循环，其中二十个 child <div>正在创建。我要 child 的时候<div>创建时，第一个父级的高度<div>会吃饱，然后剩下的 child <div>将自动转移到第二个 parent <div> .我每次尝试都失败了。我只是分享我的基本代码。

CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.div1 {
    height: 100%;
    width: 50%;
    background-color: red;
    float: left;
}
.div2 {
    height: 100%;
    width: 50%;
    background-color: blue;
    float: left;
}
.child{
    height:100px;
    width:200px;
    background-color:yellow;
    margin:1px;
}

HTML

<div class="div1">
    @for (int i = 0; i < 20; i++)
    {
        <div class="child">@i</div>
    }
</div>
<div class="div2"></div>

有人可以帮忙吗？

Answer 1

您想使用列吗？然后使用它!

.parent {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}

<div class="parent">
  <div><img src="http://placehold.it/350x150" /></div>
  <div><img src="http://placehold.it/350x150" /></div>
  <div><img src="http://placehold.it/350x150" /></div>
  <div><img src="http://placehold.it/350x150" /></div>
  <div><img src="http://placehold.it/350x150" /></div>
  <div><img src="http://placehold.it/350x150" /></div>
  <div><img src="http://placehold.it/350x150" /></div>
  <div><img src="http://placehold.it/350x150" /></div>
  <div><img src="http://placehold.it/350x150" /></div>
</div>