asp.net - 如何将 gridview 控件中的图像彼此相邻对齐

Question

我上传了一些图像及其在数据库中的路径，并添加了一个图像模板列，它显示正常，但图像显示在彼此之上，这是我的代码:

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="id" DataSourceID="SqlDataSource2" 
            EmptyDataText="There are no data records to display." BorderStyle="None">
            <Columns>
                <asp:BoundField DataField="id" HeaderText="id" ReadOnly="True" 
                    SortExpression="id" Visible="False" />
                <asp:TemplateField ShowHeader="False">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("img") %>' 
                            Tooltip='<%# Eval("img") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                                <div style="height:90px;white-space:nowrap;display:inline;">
                                <img id="photoAlbumPhotos" class="photoAlbumPhotos" runat="server" alt="Image Not Found" src='<%# Eval("img") %>' />
                                </div>
                    </ItemTemplate>
                    <ControlStyle BorderStyle="None" />

                    <ControlStyle BorderStyle="None" cssclass="test"></ControlStyle>

                    <HeaderStyle BorderStyle="None" />
                    <ItemStyle BorderStyle="None" HorizontalAlign="Left" Wrap="False" 
                        CssClass="test" />
                </asp:TemplateField>
            </Columns>
            <RowStyle Wrap="False" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
            ConnectionString="<%$ ConnectionStrings:testConnectionString1 %>" 
            DeleteCommand="DELETE FROM [img] WHERE [id] = @id" 
            InsertCommand="INSERT INTO [img] ([img]) VALUES (@img)" 
            ProviderName="<%$ ConnectionStrings:testConnectionString1.ProviderName %>" 
            SelectCommand="SELECT [id], [img] FROM [img]" 
            UpdateCommand="UPDATE [img] SET [img] = @img WHERE [id] = @id">
            <DeleteParameters>
                <asp:Parameter Name="id" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="img" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="img" Type="String" />
                <asp:Parameter Name="id" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>

我试过图像 float:left,dispaly:inline,inline-block 但没有成功

我正在使用 asp.net 4.0

谢谢

Answer 1

这是 GridView 的正常行为。您可以使用 ListView 和 GroupTemplate 属性实现并排呈现:

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listview.grouptemplate.aspx