画廊设计每四个项目后有一个小时

Question

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

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

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

我在 asp.net 中使用转发器控件来执行此操作。

我将不胜感激。

我的代码

 <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 标签并从所有项目中删除边框......

Answer 1

我可以使用 :nth-child 选择器提出 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 选择器。这是完整版本 - http://jsfiddle.net/caprella/Srrjj/。

Answer 2

另一个想法是使用 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 
        }
    }

Answer 3

这并不能解决您的具体问题，但您也可以考虑将 4 个图像放入一个 div 中，然后在其上放置一个边框底部，除了最后一个 div。

HR 标签具有非常模糊的语义，因此被认为是一个主要表现形式的标签。由于现代设计师倾向于厌恶表现形式的 HTML 标签，他们往往会偏离这一点。

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

如果可以的话，使用 div 会减少移动部分，在语义上更简洁（因为您没有用 div 暗示任何东西），并且更容易创建和维护。