Question

我正在尝试使用元素（在本例中为输入字段）创建布局，用户可以根据需要添加任意数量的布局，也可以删除它们。元素进入列，每列最多可包含4个元素。这是一个简单版本，没有列功能https://jsfiddle.net/khfpp2vL/2/

如果有4个元素，它应该如下所示：

[1]
[2]
[3]
[4]

如果添加了第五个元素，它应该在它自己的列中：

[1][5]
[2]
[3]
[4]

有更多元素：

[1][5][9]
[2][6][10]
[3][7]
[4][8]

等等。

我无法创建包装器并且每个都有四个元素，因为如果从中间删除元素，那么剩下的元素必须能够切换到另一列。例如，如果我从前一个示例中删除3和6，它将更改为

[1][7]
[2][8]
[4][9]
[5][10]

我已经尝试过css列，类似于http://jsfiddle.net/NJ4Hw/（不是我创建的）。但问题是我无法控制每列中的元素数量。当元素的数量可以被4整除时，我可以使用javascript更改列数，所以我将拥有适当数量的列，但是我例如删除小提琴中除了9个元素之外的所有内容并将列数更改为3，它会像这样划分它们：

[1][4][7]
[2][5][8]
[3][6][9]

我需要它在第一列中仍然有4个元素：

[1][5][9]
[2][6]
[3][7]
[4][8]

我还想到了一个解决方案，其中父级具有最大高度，并且只有四个元素垂直适合它，但我无法弄清楚如何安排它们。例如，如果我使用浮点数，当空间用完时，它将相互浮动1和2。

所以我不确定下一步该尝试什么。 Flexbox的？某种Javascript解决方案？还是有一些我没有想到的超级简单的解决方案？

Answer 1

我已经尝试过css列，类似于http://jsfiddle.net/NJ4Hw/（不是我创建的）。但问题是我无法控制每列中的元素数量。

您可以通过控制元素的高度和容器中列的高度来实现：

.container {
  -moz-column-count: 4;
  -moz-column-gap: 20px;
  -webkit-column-count: 4;
  -webkit-column-gap: 20px;
  column-count: 4;
  column-gap: 20px;
  height: 5em;
}
.container > input {
  height: 1em;
  margin: 0;
}

<!--[if lt IE 10]>
<style>
/* This is copied from the Fiddle you referenced, I presume it's a
   fallback for IE9 and earlier not supporting columns or some such
*/
.container > input {
    width: 25%;
    float: left
}
</style>
<![endif]-->
<div class="container">
  <input type="text" value="Item 1">
  <input type="text" value="Item 2">
  <input type="text" value="Item 3">
  <input type="text" value="Item 4">
  <input type="text" value="Item 5">
  <input type="text" value="Item 6">
  <input type="text" value="Item 7">
  <input type="text" value="Item 8">
  <input type="text" value="Item 9">
  <input type="text" value="Item 10">
  <input type="text" value="Item 11">
  <input type="text" value="Item 12">
  <input type="text" value="Item 13">
  <input type="text" value="Item 14">
  <input type="text" value="Item 15">
  <input type="text" value="Item 16">
  <input type="text" value="Item 17">
  <input type="text" value="Item 18">
  <input type="text" value="Item 19">
  <input type="text" value="Item 20">
  <input type="text" value="Item 21">
  <input type="text" value="Item 22">
  <input type="text" value="Item 23">
</div>

显然，你会想要调整它以使它看起来很好。： - ）

Answer 2

这可以使用CSS弹性框来完成。我把快速版本放在一起。你可以学习调整它以达到你想要的方式。

http://codepen.io/aaronbalthaser/pen/vKXVvm

我在您的代码中添加了以下CSS：

.inputs {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  height: 120px;
  width: 100%; 
}

.container {
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start; 
}

Answer 3

您可以在第一个jsfiddle中编辑JS，如下所示：

$('.add').on('click', function() {
  if($('.inputs:last .container').length > 3){
    $('.inputs:last').last().after('<div class="inputs"></div>');
  };
  $('.inputs:last').append(' \
    <div class="container"> \
        <input type="text" class="input"> \
      <button class="remove">Remove</button> \
     </div>'
   );
});

并将其添加到样式表中：

.inputs { float: left; }

将元素拆分为每列中具有特定数量元素的列（html，css，javascript）

3 个答案: