1

下の画像に示すように、ギャラリーを設計する必要があります。これまでのところ完成していますが、デザインの問題に直面しています。

幅 800 ピクセルのコンテナーに 4 つの項目を表示し、各 div パディングを右と下に加えて、border-bottom:1px にする必要があります。

ここに画像の説明を入力

ページ 4 にアイテムが 1 つしかないと仮定すると、次のように表示されます。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タグを追加し、すべてのアイテムからボーダーを削除する必要がある他のアイデア...

4

3 に答える 3

1

各行の最初の項目を見つけてその上に hr を配置するために、:nth-child セレクターを使用して css-solution を提案できます。

.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 に答える