如何在網格視圖中的一行中的三個圖像之間添加空格？

我已經從數據庫中檢索到三個圖像並將它們顯示在網格視圖中。問題是我無法在所有三個圖像之間獲得空間。如何在網格視圖中的一行中的三個圖像之間添加空格？

即使給出單元格間距值，它也不工作。以下是圖像：

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

來源

2017-03-20 Mohammed Hussain Merchant

添加點點保證金將解決您的問題。設置的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>

來源

2017-03-20 12:17:38

非常感謝我的工作:) @M Adeel Khalid –

寫下面的代碼，並檢查其工作或不

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

試試這個

來源

2017-03-20 12:17:15

如何在網格視圖中的一行中的三個圖像之間添加空格？

回答

相關問題