使用jQuery向列表中添加项时使用浮动div分隔的两列布局

<div id="leftcontainer">           
 <div id="anothercontainer">               
  <ul id="items">
   <li>Text</li> 
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>...</li>                                                                                              
  </ul>                         
 </div> 
</div> 

<div id="rightcontainer">           
 <div id="yetanothercontainer">                                  
    <ul>
   <li>Title</li>
   <li>Title</li>
   <li>Title</li>   
    </ul>
 </div>               
</div>

CSS是这样的。

#rightcontainer { float:right; width:40%; } 
#leftcontainer { float:left; width:60%; }
#anothercontainer { list-style: none; } 
#anothercontainer li { display:inline; }

到现在为止,一直都还不错。如果项目列表中有很多listitems,则listitems在几乎接触到右容器时会从新行开始。

但是,当我使用jQuery向列表中添加更多的项时,这些项不再中断。但是只要继续到页面的末尾,重叠右边的容器。

function success(data, textStatus) {
 $.each(data.d, function(i, item) {
  $("#items").append("<li>" + item.Name + "</li>");
 });                                 
}