.Net Listview 与流布局水平显示答案

【问题标题】：.Net Listview with flow layout display horizontally.Net Listview 与流布局水平显示
【发布时间】：2015-01-06 21:30:45
【问题描述】：

我正在使用引导程序开发我的第一个移动网站。我正在尝试创建一个响应式的 Listview，我做了一些研究，我需要选择 Layout= Flow 但我的问题是这个布局从上到下流动（一列）。我需要能够从左到右显示最多 4 个项目，但我无法让它工作。

代码

    <asp:ListView ID="ProductsListView"  DataSourceID="SqlDataSource1"  runat="server" DataKeyNames="ID">

    <LayoutTemplate >
        <div ID="itemPlaceholderContainer" runat="server" style="">
            <span runat="server" id="itemPlaceholder" />
        </div>
        <div style="">
        </div>
    </LayoutTemplate>


    <ItemTemplate>
        <span style="">ID:
        <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
        </span>
    </ItemTemplate>

  </asp:ListView>

【问题讨论】：

标签： c# asp.net twitter-bootstrap mobile responsive-design

【解决方案1】：

您似乎遇到了与该用户相同的问题。

horizontal list view in asp.net

LayoutTemplate 包含一个块级元素（div）。这意味着 ItemTemplate 将被包裹在 div 中，该 div 将占据整个可用宽度。

您应该能够从 LayoutTemplate 中删除 div，使其成为一个跨度，或者使其成为一个表格，就像我从 @mshsayem 链接的帖子的选定答案中一样

如果你只想在一行中显示图像，你可以把它们在单行的列中。尝试重写列表视图标记如下（将table,tr标记移动到LayoutTemplate）：

<asp:ListView runat="server" ID="PageHorizon">
  <LayoutTemplate>
      <table>
      <tr>
         <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
      </tr>
      </table>
  </LayoutTemplate>
  <ItemTemplate>  
          <td>
              <img src='<%#Eval("ImagePath")%>' alt="Single Image"  
              width="64px" height="64px" />
          </td>       
  </ItemTemplate>
</asp:ListView>

【讨论】：

您好 Toni，感谢您抽出宝贵时间回答我的问题，非常感谢。我正在测试您的解决方案，如果您只想水平显示布局“流”的项目，它会很好用。但在我的情况下，我需要这样做，而且它必须是响应式的，如果布局是表格，这是不可能的。很多小时后，我终于明白了。我希望你有一个美好的一天！

【解决方案2】：

下面的脚本显示了具有 layout = flow 水平的 Listview 项目并且它是响应式的。我希望有人觉得它有用。

    <div style=" text-align: center;">

                <!-- start listview-->

                 <asp:ListView ID="ListView1" runat="server" DataKeyNames="ID" DataSourceID="SqlDataSource1">


                    <LayoutTemplate >
                    <div ID="itemPlaceholderContainer" runat="server" >
                        <span runat="server" id="itemPlaceholder" />
                    </div>

                   </LayoutTemplate>


                    <EmptyDataTemplate>
                        <span>No data was returned.</span>
                    </EmptyDataTemplate>

                    <ItemTemplate>

                    <table style="display: inline-block;" >

                     <tr >
                                <td colspan="3">
                                    <asp:Image ID="Image1" runat="server" Height="200px" 
                                        ImageUrl='<%# Eval("Picture") %>' Width="150px" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;</td>
                                <td>
                                    &nbsp;</td>
                                <td>
                                    &nbsp;</td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;</td>
                                <td>
                                    <span style="background-color: #FFFBD6;color: #333333;">
                                    <asp:Label ID="OrderOfferNameLabel" runat="server" 
                                        Text='<%# Eval("WHATEVER") %>'></asp:Label>
                                    </span>
                                </td>
                                <td>
                                    &nbsp;</td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;</td>
                                <td>
                                    <span style="background-color: #FFFBD6;color: #333333;">
                                    <asp:Label ID="ProductNameLabel" runat="server" 
                                        Text='<%# Eval("WHATEVER") %>'></asp:Label>
                                    </span>
                                </td>
                                <td>
                                    &nbsp;</td>
                            </tr>
                            <tr>
                                <td colspan="3">
                                    <asp:Button ID="Button1" runat="server" Height="44px" 
                                        style="height: 26px; width: 56px" Text="Button" Width="380px" />
                                </td>
                            </tr>

                    </table>


                    </ItemTemplate>

                </asp:ListView>

         </div>

【讨论】：