Question

我从数据库中检索了三张图片，并在网格视图中显示。问题是我无法在所有三个图像之间获得空间。

即使我给出单元格间距值，它也不起作用。这是图像：

<asp:Content ID="Content2" ContentPlaceHolderID="Home" Runat="Server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="packid" DataSourceID="SqlDataSource1" GridLines="None">
    <Columns>
        <asp:BoundField DataField="packid" HeaderText="packid" InsertVisible="False" 
            ReadOnly="True" SortExpression="packid" ItemStyle-Width="95px" />
        <asp:BoundField DataField="packname" HeaderText="packname" 
            SortExpression="packname" />
        <asp:BoundField DataField="categoryname" HeaderText="categoryname" 
            SortExpression="categoryname" />
        <asp:BoundField DataField="subcatname" HeaderText="subcatname" 
            SortExpression="subcatname" />
        <asp:BoundField DataField="packageprice" HeaderText="packageprice" 
            SortExpression="packageprice"/>
        <asp:TemplateField HeaderText="pic1" SortExpression="pic1" ItemStyle-Width="80px">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("pic1") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Image ID="Image1" runat="server" Height="50px" 
                    ImageUrl='<%# Eval("pic1") %>' Width="80px" />
            </ItemTemplate>
            <HeaderStyle Width="60px" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="pic2" SortExpression="pic2" ItemStyle-Width="80px">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("pic2") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Image ID="Image2" runat="server" Height="50px" 
                    ImageUrl='<%# Eval("pic2") %>' Width="80px" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="pic3" SortExpression="pic3" ItemStyle-Width="80px">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("pic3") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Image ID="Image3" runat="server" Height="50px" 
                    ImageUrl='<%# Eval("pic3") %>' Width="80px" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>



<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:ToursandTravelsConnectionString %>" 
    SelectCommand="SELECT [packid], [packname], [categoryname], [subcatname], [packageprice], [pic1], [pic2], [pic3] FROM [package]"></asp:SqlDataSource>

</asp:Content>

Answer 1

写下以下代码并检查其是否正常工作

<asp:Image ID="Image3" runat="server" Height="50px" 
                    ImageUrl='<%# Eval("pic3") %>' Width="80px" style="padding-left:10px; padding-right:10px" />

试试这个

Answer 2

添加一点保证金将解决您的问题。像这样设置图像的cssClass：

<asp:Image ID="Image2" runat="server" CssClass="imgDist" Height="50px" 
                ImageUrl='<%# Eval("pic2") %>' Width="80px" />

并且在你的风格中做到这一点：

<style>
    .imgDist {
        margin:5px;
    }
</style>

或者不是设置类，只需添加它，它将应用于所有图像。

<style>
    img {
        margin:5px;
    }
</style>

如何在网格视图中连续三个图像之间添加空格？

2 个答案: