如何使用 JQuery 和 CSS 使 Datalist 项目自动调整，类似于 div

引言

本文介绍如何使用 JQuery 和 CSS 使 HTML 中的 datalist 项目像 div 元素一样自动调整，如下图所示：   

使用方法  

在 div 中，当你给出样式 float:left 并给出 width 时，当你删除中间的 div 时，div 会自动调整到容器中。

当您使用 datalist 显示图像列表并使用 JQuery 删除任何图像时，如果您删除任何中间的图像，则页面不会刷新，并且图像将被删除，但它将在那里显示空白区域，如下所示。您可以在下图中最右侧的第二行中看到空白区域。

其背后的原因是“RepeatLayout”属性的默认值为“Table”。这意味着这些项目位于 table 以及 tr、td 布局中。因此它无法像 div 或 span 元素一样自动移动。

现在让我们讨论一下解决方案

1. 将 datalist 的“RepeatLayout”属性设置为“Flow”，如以下示例所示
   • 示例： 

     RepeatLayout="Flow"  

   • 通过此属性，datalist 项目将被转换为 span 元素，而不是 tr、td 元素。
   • 并且还删除 RepeatColumns 属性
   • HTML 标签：  

   <asp:DataList ID="dlPhotos" runat="server" 
   DataSourceID="sqlListing" RepeatDirection="Vertical" RepeatLayout="Flow"> 

2. 为 datalist 添加类以隐藏标签，例如

   .hidebr br
   {
   display:none; 
   }  

   • 添加这个类的原因是使结构对齐正确，意味着每个 span 都相互对齐。如果您不添加这个类，那么结构将显示如下

     

   • 现在 HTML 标签将像这样

     <asp:DataList ID="dlPhotos" runat="server" DataSourceID="sqlListing" 
     RepeatDirection="Vertical" RepeatLayout="Flow" CssClass="hidebr">

3. 现在为 datalist 的 ItemStyle 标签赋予任何类名
• 示例

  <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" 
  	CssClass="tdContainer"/>

• 因此它将类 tdContainer 应用于所有 span 元素。
4. 然后编写 JQuery 代码如下

首先，请在您的页面中添加最新的 JQuery 文件。 您可以从 here OR here 下载它。

$(document).ready(function(){
var tdImg = $("#<%=dlPhotos.ClientID%> .tdContainer");
tdImg.attr("style",'width:150px;float:left;');
)};     

• 因此，它将为所有 span 元素赋予 150px 的 width，并给出 float:left 属性，因此现在当您删除任何中间图像时，所有 span 元素将自动对齐。    

执行以上四个步骤并享受......:-)