编辑GridView控件模板之后 发现只能一竖列显示 不能横排显示
请问怎么设置才能横排显示?
代码如下
<head runat="server">
<title>无标题页</title>
<style type="text/css" media="screen">
#dp{width:800px;}
#display { width:190px; background-image:url(image/index-dispaly-image-bg.gif); background-position:185px 15px; background-repeat:repeat-y;float:left;}
.display-title { height:22px; font:"宋体"; font-size:20px; text-align:center; font-weight:bold;}
.display-image { height:135px; width:190px;}
.display-image img{ height:120px; width:160px; margin-left:14px; margin-right:14px; margin-top:5px; margin-bottom:7px;}
#display-data{text-align:center; font:"宋体"; font-size:16px;}</style></head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="gvProduct" runat="server" DataKeyNames="ID" AutoGenerateColumns="False" ShowHeader="False" >
<EmptyDataTemplate>暂无商品!</EmptyDataTemplate>
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div id="dp">
<div id="display">
<div class="display-title"><a href="ShowProduct.aspx?ProductID=<%# Eval("ID") %>" target="_blank">商品名称</a></div>
<div class="display-image"><a href="ShowProduct.aspx?ProductID=<%# Eval("ID") %>" target="_blank"><img src="<%# Eval("PictureUrl") %>" border="0" alt="商品图片"/></a></div><div id="display-data">
<span>市场价格:<%# Eval("Price","{0:f2}") %></span><br>
<span>会员价格:<%# Eval("Price","{0:f2}") %></span><br>
<span>浏 览 量:<%# Eval("ViewCount","{0:f2}") %></span>
</div>
</div></div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</form>
</body>
请问怎么设置才能横排显示?
代码如下
<head runat="server">
<title>无标题页</title>
<style type="text/css" media="screen">
#dp{width:800px;}
#display { width:190px; background-image:url(image/index-dispaly-image-bg.gif); background-position:185px 15px; background-repeat:repeat-y;float:left;}
.display-title { height:22px; font:"宋体"; font-size:20px; text-align:center; font-weight:bold;}
.display-image { height:135px; width:190px;}
.display-image img{ height:120px; width:160px; margin-left:14px; margin-right:14px; margin-top:5px; margin-bottom:7px;}
#display-data{text-align:center; font:"宋体"; font-size:16px;}</style></head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="gvProduct" runat="server" DataKeyNames="ID" AutoGenerateColumns="False" ShowHeader="False" >
<EmptyDataTemplate>暂无商品!</EmptyDataTemplate>
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div id="dp">
<div id="display">
<div class="display-title"><a href="ShowProduct.aspx?ProductID=<%# Eval("ID") %>" target="_blank">商品名称</a></div>
<div class="display-image"><a href="ShowProduct.aspx?ProductID=<%# Eval("ID") %>" target="_blank"><img src="<%# Eval("PictureUrl") %>" border="0" alt="商品图片"/></a></div><div id="display-data">
<span>市场价格:<%# Eval("Price","{0:f2}") %></span><br>
<span>会员价格:<%# Eval("Price","{0:f2}") %></span><br>
<span>浏 览 量:<%# Eval("ViewCount","{0:f2}") %></span>
</div>
</div></div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</form>
</body>
如果你想竖排显示,除非你自己从GridView中继承从新自定义一个新的GridView对象!