Question

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

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

enter image description here

假设第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标记＆amp;从所有项目中删除boder ...

Answer 1

我可以使用：nth-child选择器提出css-solution，以便找到每一行的第一项并将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的东西），并且更容易创建和维护。

画廊设计，每四个项目后hr

3 个答案: