在显示图像的GridView为块项目 [英] Showing Images in gridview as block items

问题描述

我想表明我的GridView的项目作为一个横5纵5下显示 - 我已经有
查询拉每一个页面只有25条记录，但不能似乎使GridView的做我想做 - ？任何建议

I want to show items in my gridview as a 5 across and a 5 down display - i already have the query pulling only 25 records per a page but cant seem to make the gridview do what i want - any suggestions?

例如------------------------------

example------------------------------

记录1：记录2：记录3：记录4：5的记录

record 1 : record 2 : record 3 : record 4 : record 5

---

记录6：7的记录：记录8：9记录：记录10

record 6 : record 7 : record 8 : record 9 : record 10

---

等...........................................

etc ...........................................

推荐答案

我的建议是切换到ListView，而不是一个GridView。是的ListView .NET 3.5中新的，并已创造了奇迹，我为正是你所谈论的场景。斯科特格思里有一个<一个href=\"http://weblogs.asp.net/scottgu/archive/2007/08/10/the-asp-listview-control-part-1-building-a-product-listing-page-with-clean-css-ui.aspx\"相对=nofollow>它在他的博客很好的例子。

My suggestion would be to switch to a ListView instead of a GridView. ListView is new in .Net 3.5, and has worked wonders for me for exactly the scenario you are talking about. Scott Guthrie has a good example of it on his blog.

下面是从我的个人网站图片的3x4的格...

Here's an example for a 3x4 grid of pictures from my personal website...

<ul id="thumbnails">
    <asp:ListView runat="server" ID="PicturesListView" ItemPlaceholderID="PicturesListItemPlaceholder"
        DataSourceID="PicturesDataSource">
        <LayoutTemplate>
            <li runat="server" id="PicturesListItemPlaceholder"></li>
        </LayoutTemplate>
        <ItemTemplate>
            <li>
                <a href='Photos/<%# Eval("WebImageId") %>.jpg' class="thickbox" rel="gallery-test"
                    title='<%# Eval("Caption") %>'>
                    <img src="Photos/<%# Eval("ThumbnailId") %>.jpg" alt='<%# Eval("Caption") %>' />
                </a></li>
        </ItemTemplate>
    </asp:ListView>
</ul>

和我的CSS排队事情就是...

and my CSS to line things up is...

/* Picture Thumbnails */
#thumbnails ul
{
    width: 800px;
    list-style: none;
}
#thumbnails li
{
    text-align: center;
    display: inline;
    width: 200px;
    height: 130px;
    float: left;
    margin-bottom: 20px;
}

这篇关于在显示图像的GridView为块项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！