通過單擊按鈕添加多個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元素

回答

相關問題