设置Div自动换行

                  在做报价录入界面，有一功能需要实现显示已上传的附件清单，我用ajax的方式从后台得到List<Map>类型的值，里头存放着所有的文件名和文件ID（文件上传时系统赋予的唯一值，防止后台保存文件时发生文件名重复）。用jquery循环读取出来，并在页面显示，代码如下：

                 // 异步ajax获得附件
                 function getAttachment(){
                         var param = $("#form1").serialize();
                        $.ajax({
                         url:"getActtachment.action",
                         type:"post",
                         data:param,
                         dataType:"json",
                         success:function(data){
    
                             // 清空div内容（在页面div id=“Content”里显示附件清单）
                            $("#Content").empty();
    
                            if(data.filelist==null || data.filelist=="")
                                      $("#Content").append("<span>无附件。</span>");
    
                            // 动态显示附件清单，及删除按钮
                           $.each(data.filelist,function(i,value){
       
                                    //alert(value.ATTACHMENT_NAME);

                                   // 设置div样式为"float: left;" 可使容器长度容纳不下div整个长度时，div会自动换行-->
                                     $("#Content").append("<div id='" + value.ATTACHMENT_ID + "' style='float: left;'>"
                                      + "<a href='poDownload?fileName=" + value.ATTACHMENT_ID +"&showFileName=" + value.ATTACHMENT_NAME + "'>"
                                      + value.ATTACHMENT_NAME + "</a> " + "<img src='../images/delete.png' id='" + value.ATTACHMENT_ID + "' alt='" 

                                     +  value.ATTACHMENT_NAME +   "' height='15' width='15' title='删除'  style='cursor:hand'  " +
                                     " οnclick='mydel(this.id,this.alt);' />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>");
       
                             });
                     }    
          });
}

显示效果如下图1：                

                                                                                             图1

若不设置样式 "float: left;"，效果则如下图2：

                                                                                             图2  

删除时用jquery语句 ： $("div[id='" + fileid + "']").remove();  即动态的从页面上去掉了该文件。 

刚开始并没有把<a ……><img ……>包含在div里，而对外面id为“Content”的div设置了此样式，但是结果显示文件名长度超过，文件名从中间换行分开了，后来突然想明白原来是 <a ……><img ……>并不是作为一个整体，也就更加没有对齐设置作为一个整体当容器长度不够时，自动换行了，于是在外面加上了"<div id = ' + value.ATTACHMENT_ID ' ……> 并设置div样式为向左浮动，这样终于达到了想要的结果。