ListView中的照片库

时间:2009-11-08 17:51:51

标签: asp.net

有没有办法使用Listview控件创建照片库?

我正在玩这个模板,但我不能在一行中获得不同的图片。

我希望在一行中有3张图片。像

这样的东西

Pic 1 Pic 2 Pic 3

Pic 4 Pic 5 Pic 6

现在我喜欢

Pic 1 Pic 1 Pic 1

Pic 2 Pic 2 Pic 2

我的代码

 <LayoutTemplate>
     <table>

        <asp:PlaceHolder ID="groupPlaceholder" runat="server"></asp:PlaceHolder>
     </table>
 </LayoutTemplate>
 <GroupTemplate>
    <tr>
        <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
    </tr>
 </GroupTemplate>

 <ItemTemplate>
    <tr>
        <td>
            <img alt="" src="<%# "http://" + Request.Url.Authority + "/" + Eval("thumbnailPath") %>" />
        </td>
        <td>
            <img alt="" src="<%# "http://" + Request.Url.Authority + "/" + Eval("thumbnailPath") %>" />
        </td>
        <td>
            <img alt="" src="<%# "http://" + Request.Url.Authority + "/" + Eval("thumbnailPath") %>" />
        </td>
    </tr>
 </ItemTemplate>  

我在集合中获取图片的网址,因此ListView。

1 个答案:

答案 0 :(得分:1)

忘记表格 - 干净的标记是首先使用ListView的主要动机。为整个集合创建一个简单的包含div,并将宽度设置为三个图像的组合宽度(加上边框等所有填充)。

然后页面的自然流将为它们分成不同的行。

[更新] 这里有一些示例标记和CSS可以帮助您入门:-) http://woorkup.com/2009/10/07/how-to-distribute-elements-horizontally-using-css/