1

I need to design a gallery as show in the image below. So far i have completed it but i am facing design issue.

I need to show four items in a container of width 800 pixels with each div padding on right and bottom plus border-bottom:1px.

enter image description here

Assuming page 4 has only one Item then it shows up as. i am not sure how to design it in such a way so that i can have line after every four elements & if the last page has 1,2,3 items then the line should be across the whole width not just under that item. The way i have it i don't think it is possible. I am not sure how to add a horizontal line after every 4th item.

I am doing this in asp.net using repeater control.

I would appreciate a pointer.

My code 

 <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>

Update: Other idea i have to add hr tag after every 4th item & remove boder from all items...

4

3 回答 3

1

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

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

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

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

于 2013-09-17T13:31:19.687 回答
1

另一个想法是使用 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 
        }
    }
于 2013-09-17T12:47:31.477 回答
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/。

于 2013-09-17T08:20:20.403 回答