javascript - 在大容器中添加小容器，如果在一个大容器中，一层是2个小容器(参见图片)

我希望该用户可以在容器“您的文本”中写入文本，然后按添加。然后将在大容器（红线）中使用用户提供的信息创建新容器。我可以这样做，但是如果我想在一楼有2个帖子怎么办？

如果某个楼层有2个帖子，并且用户添加了一个新帖子，则整个楼层会向下移动，新的帖子就会出现，并且位于最新楼层的左侧。然后，如果用户添加另一个楼层，它将被放置在最新楼层的右侧。这是逻辑。等等。

我不需要完整的代码，也许有些教程或只是想法如何做到这一点，因为我可以
仅添加1个帖子，然后在1楼添加1个帖子，类似于“ TODO”应用。
但是，如果我想在1楼放2件东西怎么办？
也许有一些jQuery插件？

根据要求，这里有图片应该如何发生









谢谢 ！

最佳答案

因为您没有提到您的网站或应用程序的外观以及它的功能，所以我认为与您要实现的功能并不完全相同。如果您的动机只是填充容器，那么第一行中的空白看起来并不好（作为最终用户的观点）。如果我正在使用这样的UI，那么我会期望像这样：

                 _____
text1           [_____]
                  add

。

                 _______
text2 | text1   [_______]
                  add

。

                 _______
text3 | text2   [_______]
------|------     add
text1 |

。

                 ______
text4 | text3   [______]
------|------     add
text2 | text1

这是我创建的东西。我希望这对我要说的话有意义

FULL SCREEN DEMO

CODE

以上演示支持：

1.从容器中取出一个盒子，

2.在根据容器中的顺序删除和添加框时将id放在框上，例如最近添加的框的ID为box1

尝试使用连续数字(1,2,3..)或工作日(sunday,monday..)等

注意：-我只测试了opera和chrome中的代码。使用的脚本看起来并不复杂，但是css包含一些部分，如果您要遵循相同的html结构，则这些部分具有用（下面）评论

关于javascript - 在大容器中添加小容器，如果在一个大容器中，一层是2个小容器(参见图片)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19955140/