Question

我创建了两个父<div>。在第一个父<div>内，我编写了一个循环，其中创建了二十个子<div>。我希望在创建子<div>时，当第一个父<div>的高度变满时，子<div>的其余部分将自动转移到第二个父<div> { {1}}。我每次尝试都失败了。我只是分享我的基本代码。

的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

你想使用专栏吗？然后使用它！

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: