如图最下面那副图片的文字说明在图片的右边,而其它图片的文字说明在图片的下方,要实现这种效果,其实只要在HTML部分用样式控制,就可以达到了。
前台代码:
先在CSS.CSS样式文件里定义二个更换的样式,
.class3{ position:absolute; left:310px; top:600px; width:280px;}
.class4{ }
<div id="main" >
<ul>
<asp:Repeater ID="datalist" runat="server">
<ItemTemplate>
<li style="float:left;">
<div class='<%# (Container.ItemIndex) == 4 ? "class1" : "class2" %>'><img src="<%#Eval("imgUrl") %>" width="280px" height="180px" /></div><br />
<div runat="server" class='<%# (Container.ItemIndex) == 4 ? "class3" : "class4" %>'><a href="newsDisplay.aspx?id=<%#Eval("ID") %>"><div style="margin-top:10px; font-size:12px;">
<span style="color:#9D6E31; font-size:16px;">><%#Eval("title") %></span><br />
<%#getContent(Eval("content").ToString()) %>
</div></a></div>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
后台代码很简单,和普通的绑定一样。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1
public
partial
class
index : System.Web.UI.Page
2 {
3 aboutus us = new aboutus();
4 protected void Page_Load( object sender, EventArgs e)
5 {
6 bind();
7 }
8 protected string getContent( string str)
9 {
10 if (str.Length > 80 )
11 {
12 str = str.Substring( 0 , 80 ) + " ... " ;
13 }
14 return str;
15 }
16 protected void bind()
17 {
18 string sql = " select top 5 ID,title,content,imgUrl from main where type='ABOUTUS' order by [order] desc " ;
19 this .datalist.DataSource = DbHelperOleDb.Query(sql);
20 this .datalist.DataBind();
21 }
2 {
3 aboutus us = new aboutus();
4 protected void Page_Load( object sender, EventArgs e)
5 {
6 bind();
7 }
8 protected string getContent( string str)
9 {
10 if (str.Length > 80 )
11 {
12 str = str.Substring( 0 , 80 ) + " ... " ;
13 }
14 return str;
15 }
16 protected void bind()
17 {
18 string sql = " select top 5 ID,title,content,imgUrl from main where type='ABOUTUS' order by [order] desc " ;
19 this .datalist.DataSource = DbHelperOleDb.Query(sql);
20 this .datalist.DataBind();
21 }
呵呵,很简单的,当时弄这个的时候头都想破了。问了好多人。