如何將元素添加爲html容器中的列堆棧？

enter image description here

我需要添加dyanimcally添加rectangebox而且必須變成這樣

enter image description here

我怎麼能這樣做呢？

我所做的是這樣的：

<div style="width:400px;"> 
     <ul id="UlPopUp" style="-webkit-columns: 2; -moz-columns: 2; columns: 2;"> 
      <li id='liLeftDescriptions'> 
       <span>Item1 
       </span> 
      </li> 
      <li id='liLeftSkills'> 
       <span>Item1</span> 
      </li> 
      <li id='liLeftClient'> 
       <span>Item1</span> 
      </li> 
     </ul> 
    </div>

http://jsfiddle.net/6eq56/

來源

2013-02-22 ALAN

我們需要更多的信息。你有什麼嘗試？什麼工作，什麼沒有？你到目前爲止給我們的只是「我想要這樣做！」 – DiMono 2013-02-22 18:14:18

感謝您的回覆，我已經厭倦了像這樣設置CSS：style =「 - webkit-columns：2; -moz-columns：2; columns：2;」在UL，但沒有工作，因爲我需要1列中的4項，當5項來的時候它應該在coumns 2 – ALAN 2013-02-22 18:16:20

我想你可能會使用類似的東西：

var div_to_append = "<li class='some_class'><span>Item1</span></li>" 
$("#clickBtn").on("click", function() { 
$("#UlPopUp").append(div_to_append); 
});

我用button檢查出jfiddle http://jsfiddle.net/6eq56/2/

我假設你w螞蟻火災事件on click或類似的東西

來源

2013-02-22 18:18:50 steo

$('button').click(function(){ 
    var elem = $("<div class='item'></div>"); 
    if($('.col1>div').length < 4) 
     $('.col1').append(elem); 
    else 
     $('.col2').append(elem); 
});

來源

2013-02-22 18:36:03

回答

相關問題