Javascript 单击按钮/JQuery时使div彼此相邻

我正在制作一种故事板，你可以在其中添加和删除帧，但我需要将div设置在彼此相邻的位置，我现在使用的代码将div放置在彼此下方。我想做一个循环 这是我的密码：

HTML

+ 

JS

\u this.addClickFunction=function（）{
var i=0；
$（'.添加按钮'）。单击（函数（）{
$（'.frame'）。在（''）之后；
});
};

使用

append（）

而不是

after（）

函数。这应该起作用：

_this.addClickFunction = function() {
  var i = 0;
  $('.add__button').click(function() {
      $('.frame').append('<div id="container'+(i++)+'"></div> <div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content"></div></div>');
  });
};

使用

append（）

而不是

after（）

函数。这应该起作用：

_this.addClickFunction = function() {
  var i = 0;
  $('.add__button').click(function() {
      $('.frame').append('<div id="container'+(i++)+'"></div> <div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content"></div></div>');
  });
};

---

如果您想并排排列元素，而这些元素的法线是块元素，因此默认情况下位于彼此下方，请使用css浮动或css flexbox

---

如果您想并排排列元素，而这些元素通常是块元素，因此默认情况下位于彼此下方，请使用css浮动或css flexbox

我需要把div放在一起

尝试此示例将新的故事容器添加到所有当前的

.container

var i=1；
$（'.添加按钮'）。单击（函数（）{
i++；
$（“.container”）。每个（函数（x）{
$（this.after（'story'+i+''）；
});
});
.frame\uu外部{
填充：20px；
背景：#222；
颜色：白色；
边框底部：实心3px绿色；
保证金：5px；
}

故事1

我需要把div放在一起

尝试此示例将新的故事容器添加到所有当前的
.container


var i=1；
$（'.添加按钮'）。单击（函数（）{
i++；
$（“.container”）。每个（函数（x）{
$（this.after（'story'+i+''）；
});
});
.frame\uu外部{
填充：20px；
背景：#222；
颜色：白色；
边框底部：实心3px绿色；
保证金：5px；
}

故事1
我相信你需要使用
$（“#故事板”）.append（
而不是
$（'.frame'））.after（
，这将在你的故事板中添加新的容器。我相信你需要使用
$（“#故事板”）.append（
而不是
$（'.frame'）。after（
这将在你的故事板中添加新的容器。感谢你的快速响应！但它仍然会将div设置在彼此下方，我的想法是将它们彼此相邻放置啊！
div
是@Flyer53提到的块元素。请参阅。你可以在CSS中对此进行调整。请尝试。谢谢你的快速响应！但是它仍然将div设置在彼此下方，我的想法是将它们彼此相邻aaah！
div
是@Flyer53提到的块元素。请参见。您可以在CSS中对此进行调整。请尝试。谢谢，这是可行的，但我需要将4个div彼此相邻，在这4个div之后，它下面的4个div彼此相邻，我希望您理解我的意思是，你只需要清除第五个元素就可以开始一个新的“行”。谢谢，这是可行的，但我需要4个div，然后在它下面的4个div相邻，我希望你理解我的意思，所以你只需要清除第五个元素就可以开始一个新的“行”。看到了吗
_this.addClickFunction = function() {
  var i = 0;
  $('.add__button').click(function() {
      $('.frame').append('<div id="container'+(i++)+'"></div> <div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content"></div></div>');
  });
};

<div class="container[i]">  
      <div class="frame__outer"> 
        <div class="frame__inner"></div>
        <div class="frame__content"></div>
      </div>
</div>