如何将gridview控件中的图像彼此对齐

时间:2011-05-02 22:06:25

标签: asp.net css

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

<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>

我试过图像浮动:左,显示:内联,内联块但没有运气

我正在使用asp.net 4.0

感谢

1 个答案:

答案 0 :(得分:1)

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

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