Question

.NET中关于repeater中图片显示的div问题，求高手，在线等

前台
<div style="Z-INDEX: 101; LEFT: 86px; WIDTH: 750px; POSITION: relative; TOP: 53px; HEIGHT: 463px" id="small">
<asp:Repeater id="rpAlbum" runat="server" OnItemCreated="rpAlbum_ItemCreated"　>

<ItemTemplate>

<%--<div id="outBox" style=" width:125px; height:140px; ">--%>
<a href='<%# GetUrl(Eval("AlbumId")) %>' rel="lightbox" title="Press X to close" style=" text-decoration:none;">
<asp:Image ID="Image" runat="server" Width="125px" Height="113px" ImageUrl='<%# GetImg(Eval("ImgUrl").ToString()) %>' />
</a>
<%--<br/><asp:CheckBox ID="ckDelete" runat="server" Text="删除" />--%>
<%--</div>--%>

</ItemTemplate>

</asp:Repeater>
</div>

后台我从数据库动态读取图片并加载到repeater ，但是控制不了图片的换行间隔问题，我就添加了如下方法
int i = 2;
int j = 1;
protected void rpAlbum_ItemCreated(object sender, RepeaterItemEventArgs e)
{
if (i % 4 == 0)
{
if (j % 3 == 1)
{
e.Item.Controls.Add(new LiteralControl("<br /><br /><br /><br /><br /><br />"));
}
else if (j % 3 == 2)
{
e.Item.Controls.Add(new LiteralControl("<br /><br /><br /><br /><br /><br />"));
}
else
{
e.Item.Controls.Add(new LiteralControl("<br /><br /><br /><br /><br /><br /><br />"));
}

j++;
}
else if (i % 4 == 1)
{
e.Item.Controls.Add(new LiteralControl("        "));
}
else if (i % 4 == 2)
{
e.Item.Controls.Add(new LiteralControl("        "));
}
else
{
e.Item.Controls.Add(new LiteralControl("        "));
}

i++;
}

效果如图，但是我在repeater中的Item中只加入一个div标签（长和宽设置与否都试过），其他什么都没加，所有的图片都显示在一列中了，求助高手。

Answer 1

你的做法不太合适

首先，你应该用纯html保证页面显示的格式和你期望相同

然后你再考虑如何用Repeater显示出来这样的html

否则别人也不知道如何能拼出来楼主所需要的html（都不知道结果是怎样的，怎么写呢？）

追问

我想要的效果就是我发的那个图，实际上也实现了。但是因为我还需要在图的下面加Checkbox，所以我就需要在ItemTemplete中加个div层（后面我还需要这个层处理图片的缩放问题）。一旦加入这个层 所有的图片都在一列中显示了

追答

也就是说实际上不是Repeater的问题，而是加了这个div后如何显示正常。

同样，先把html代码搞定，再考虑什么ItemTemplate

Answer 2

用DataList控件更方便

追问

我用Datelist试过 还是没到想象中的效果

追答

呵呵，Datelist 要用样式来控制，否则就没有什么效果的。
你也可以在repeater中，把放在里面，再用css样式来控制,就有效果了

追问

谢谢，不过我是新手，对css样式不怎么会，之前在学校基本上都是老师帮我们写好的，我们直接拿来用就可以了，如果可以的话 能不能给个建议

Answer 3

给每个图片套个div，设置div固定宽度和高度，向坐浮动。（float:left）

追问

我设置了float:left后图片不在一列里显示了，而是紧缩着分两行显示了（我把ItemCreated注释了，因为留这更乱），我很纠结……

追答

紧缩？
那再设置每个div的margin吧（margin:10px）
根据实际情况设置10px还是其它值。不同设置之间用分号隔开。（float:left;margin:10px）