Question

我正在尝试为投资组合创建一个水平网格。

所以它是从上到下的网格堆叠元素，当它到达3个元素时，返回到顶部以开始新的列。

有没有办法在容器中添加方块，当方块溢出时，将它们堆叠起来？

我被困在这里＆gt; test

Answer 1

我会将容器元素设置为具有属性flex-flow:column wrap;的弹性框。

#container {
  max-height: 700px;
  display: flex;
  flex-flow: column wrap;
}
.square {
  text-align: center;
  width: 200px;
  height: 200px;
  background-color: red;
  border: solid 1px white;
}

<div id="container" class="clearfix">
  <div class="square">
    <p>1</p>
  </div>
  <div class="square">
    <p>2</p>
  </div>
  <div class="square">
    <p>3</p>
  </div>
  <div class="square">
    <p>4</p>
  </div>
  <div class="square">
    <p>5</p>
  </div>
  <div class="square">
    <p>6</p>
  </div>
  <div class="square">
    <p>7</p>
  </div>
  <div class="square">
    <p>8</p>
  </div>
  <div class="square">
    <p>9</p>
  </div>
  <div class="square">
    <p>10</p>
  </div>
  <div class="square">
    <p>11</p>
  </div>
  <div class="square">
    <p>12</p>
  </div>
  <div class="square">
    <p>13</p>
  </div>
  <div class="square">
    <p>14</p>
  </div>
  <div class="square">
    <p>15</p>
  </div>
  <div class="square">
    <p>16</p>
  </div>
  <div class="square">
    <p>17</p>
  </div>
  <div class="square">
    <p>18</p>
  </div>
  <div class="square">
    <p>19</p>
  </div>
  <div class="square">
    <p>20</p>
  </div>
</div>

Answer 2

作为@Woswsk，我会选择flex，但是inline-flex是我选择让列彼此保持对立：

我还会使用伪填充最后一个col中的任何间隙来模仿bg-color。

如果你需要bg-color来填充整个宽度，你需要一个额外的包装来显示它。下面的代码片段使用body来显示额外包装的使用。在这种情况下，伪没有任何目的..

$(function() {

  for (var i = 0; i < 20; i++) {
    $("#container").append("<div class='square'><p>" + (i + 1) + "</p></div>")
  }

});

#container {
  max-height: 600px;
  /* test also 800 & 1300px to see pseudo behavior*/
  display: inline-flex;
  flex-flow: column wrap;
  background: blue;
}
#container:after {
  content: '';
  flex: 1;
  background: blue;
}
.square {
  text-align: center;
  width: 200px;
  height: 200px;
  background-color: red;
  border: solid 1px white;
}
* {
  box-sizing: border-box;
}
/* body used as extra wrapper for demo show */

html {
  background: white;
}
body {
  background: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="clearfix"></div>

如何在父级中包含div网格

2 个答案: