Jquery 画廊设计与人力资源后，每四个项目

我需要设计一个画廊，如下图所示。到目前为止，我已经完成了它，但我面临的设计问题

我需要在一个宽度为800像素的容器中显示四个项目，每个div填充在右侧和底部加上边框底部：1px

假设第4页只有一项，那么它显示为。我不知道如何设计它，这样我就可以在每四个元素后面有一行&如果最后一页有1,2,3 然后，该行应横跨整个宽度，而不是仅位于该项目下方。我认为这是不可能的。我不知道如何在每4项后添加一条水平线

我在asp.net中使用repeater控件进行此操作

如果能给我一个指针，我将不胜感激

我的代码

 <asp:Repeater ID="rptVideoGallery" runat="server" >
                    <ItemTemplate>
                        <div class="video-wrapper">
                            <asp:HyperLink ID="hylnkvideo" CssClass="youtube"  NavigateUrl='<%# getURL(Eval("VID"), Eval("YoutubeID")) %>' runat="server">
                                <div class="video-image-wrapper">
                                    <asp:Image ID="imgvideo" ImageUrl='<%# getImagePath(Eval("thumbnail"), Eval("YoutubeID")) %>'   AlternateText='<%# getTitle(Eval("Title")) %>'  runat="server" CssClass="vthumbnail" />
                                </div>
                                <div class="playVideo">
                                    <asp:Image ID="imgPlay" runat="server"  ImageUrl="~/images/playVideo.png" BorderWidth="0" />
                                </div>
                               <div class="video-title">
                                    <asp:Label ID="lblTitle" CssClass="vname" runat="server" Text='<%#Eval("Title") %>'></asp:Label>
                                    <asp:Label ID="lblDate" CssClass="vdate" runat="server" Text='<%# Eval("Date") %>'></asp:Label>
                               </div>

                            </asp:HyperLink>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>

---

更新：其他想法我必须在每4项后添加hr标签，并从所有项目中删除boder

我可以使用：n子选择器提出css解决方案，以便找到每行的第一项并将hr置于其上方：

.video-wrapper li:nth-child(4n+1):after {
    content: "";
    width: 760px;        /* fixed width of container without paddings */
    height: 1px;         /* height of border */
    background: #555;    /* color of border */
    position: absolute;
    left: 0;
    bottom: 0;
}

---

但这样每个项目都应该有相同的高度。哦，看来老的浏览器不会理解这些css选择器。这是完整的版本-

另一个想法是使用ItemCreated事件处理程序删除最后4个项目的底部边框，然后只在所有项目下面添加一个hr或div

int currentItem = 0;

    //This value will be set when data source retreives data
    int totalCount = 43;

    protected void Repeater1_ItemCreated(object sender, RepeaterItemEventArgs e)
    {
        currentItem++;

        //This will give you last 4 items 
        if (currentItem > totalCount / 4 * 4)
        { 
            //remove bottom border using inline css 
        }
    }

---

<>这不能解决你的特定问题，但是你也可以考虑把4个图像放到div中，然后在它上面放置一个边框，除了最后一个div.p/p> HR标记的语义非常模糊，因此被认为是一个最具代表性的标记。由于现代设计师倾向于厌恶表现型HTML标记，他们倾向于偏离这一点

同样由于语义模糊，浏览器对HR的处理方式也有很大差异。您可以控制它的样式，但控制不多，而且不一致

---

如果可以的话，改用div可以减少移动部件，语义更简洁（因为你没有暗示div有任何含义），并且更容易创建和维护。

我喜欢使用这种方法唯一的问题是下面的IE 8 7不支持它。。。若我并没有记错的话，我用jquery解决了这个问题，在第四个div之后添加了hr标记，因为我只需要显示8个图像，而最下面一行并没有边框。