通过单击按钮添加多个div元素

我想通过单击按钮创建4个div个元素。
请参阅，this fiddle为我目前的实施。通过单击按钮添加多个div元素

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

我想有4个div相（2个顶部，两个在底部，方形）

那一部分我的代码：

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; 
};

我怎样才能做到这一点？

来源

2014-02-24 user3249337

你的提琴似乎被打破 – jhohlfeld

与ID仅供参考，你是克隆DIV，使重复的ID是无效的。你不应该在克隆的DIV上设置一个ID –

CSS在这里很方便。您可以将每个2'div'的集合包装在另一个'div'中，作为按照需要分配“display”属性和/或“clear”属性的行，或者如果适合，则可以使用'float'属性。无论哪种方式，最有可能需要CSS解决方案。 – Nope

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

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

的CSS

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

Demo

来源

2014-02-24 10:12:02

可以使用float:left以及display:inline-block你的DIV 。

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

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

来源

2014-02-24 10:14:47 Arjun

你可以试试这个使用CSS

div { float :left }

你可以把动态的ID给每个div中它不以其他分区的效果。

，这里是你的演示

Fiddle

来源

2014-02-24 10:27:17 YashPatel

通过单击按钮添加多个div元素

回答

相关问题