Question

我想通过点击按钮创建4个div元素有关我当前的实施情况，请参阅this fiddle。

在当前视图中，新元素添加到彼此的底部我的问题是我不知道如何将它们并排放置。

我希望有4个div个元素（两个在顶部，两个在底部，方形）

这是我的代码的一部分：

var box = document.getElementById('box'),
    template = box.getElementsByTagName('div'),


template = template[0];

submit1.onclick = function () {
    var new_field = template.cloneNode(true);
    box.appendChild(new_field);
    return false;
};

我该怎么做？

Answer 1

这是因为div's默认display是block所以你需要添加

display:inline-block;// add this to your div style

<强>的CSS

div { margin:1em;display:inline-block; }

Demo

Answer 2

您可以将float:left以及display:inline-block用于您的div。

div { margin:1em;float:left; }

OR

div { margin:1em;display:inline-block; }

Answer 3

您可以使用CSS

尝试此操作

div { float :left }

您可以为每个div提供动态ID，因此它不会对其他div产生影响。

这是你的演示

Fiddle

单击按钮添加多个div元素

3 个答案: