2

最初の列に 1 ～ 7 を表示し、2 番目の列に 7 ～ 15 のカテゴリを表示する 2 列形式でカテゴリのリストを表示する必要があります

ASP.Net リピーター コントロールを使用してカテゴリを表示しています & jsFiddle の例のようになります

ASP.Net コード

<asp:Repeater ID="rptCategoryList" runat="server" EnableViewState="False" >
    <ItemTemplate>
        <div class="footer-menu-item">
            <asp:HyperLink ID="hylnkArticle" CssClass="footer-menu-links" ToolTip ='<%# getCategoryName(Eval("Name"))%>' NavigateUrl='<%#getCategoryURL(Eval("URL") %>' runat="server" BorderWidth="0">
                <asp:Label ID="lblTitle" Text='<%# getCategoryName(Eval("Name"))%>' runat="server" ></asp:Label>
            </asp:HyperLink>
        </div>
    </ItemTemplate>
</asp:Repeater>
<!-- Categories -->

目的の出力は次のように表示されるはずです

1      8
2      9
3      10
4      11
5      12
6      13
7      14

この形式は CSS を使用して可能ですか、それとも jQuery を使用する必要がありますか。リテラル コントロールを使用してコード ビハインドから実行したくありません。私たちの設計要件は近い将来になる可能性があります。ISo私はCSSまたはjQueryを使用してこれを実現したいと考えています。

また、機能しなかったさまざまなcssプロパティを試しました

HTML コードのサンプル

<div class="footer-content-column-one">
<!-- Categories -->  
    <div class="footer-mt">CATEGORIES</div>
    <div class="footer-menu-item">1</div>
    <div class="footer-menu-item">2</div>
    <div class="footer-menu-item">3</div>
    <div class="footer-menu-item">4</div>
    <div class="footer-menu-item">5</div>
    <div class="footer-menu-item">6</div>
    <div class="footer-menu-item">7</div>
    <div class="footer-menu-item">8</div>
    <div class="footer-menu-item">9</div>
    <div class="footer-menu-item">10</div>
    <div class="footer-menu-item">11</div>
    <div class="footer-menu-item">12</div>
    <div class="footer-menu-item">13</div>
    <div class="footer-menu-item">14</div>
<!-- Categories -->
</div>
4

2 に答える 2

2

このフィドルで十分かどうかを確認してください：http://jsfiddle.net/G7Uk2/5/ 典型的なjQuery操作を使用しました（そして視覚的なヒントのために境界線を追加しました）：

var fi = $(".footer-menu-item");
fi.remove();   
for(var i=0;i<7;i++){
    fi.eq(i).css("clear","both").appendTo(".footer-content-column-one");
    fi.eq(i+7).appendTo(".footer-content-column-one");
}
于 2013-05-22T06:26:51.447 に答える
0

これでよろしいですか

<div style="clear:both;background-color:yellow;height:20em;width:40em">
    <div style="clear:both">
        <div style="float:left;width:20em;background-color:blue;">this is left</div>
        <div style="float:right;width:20em;background-color:red;">this is right</div>
    </div>
    <div style="clear:both">
        <div style="float:left;width:20em;background-color:blue;">this is left</div>
        <div style="float:right;width:20em;background-color:red;">this is right</div>
    </div>  
            <div style="clear:both">
        <div style="float:left;width:20em;background-color:blue;">this is left</div>
        <div style="float:right;width:20em;background-color:red;">this is right</div>
    </div>
    <div style="clear:both">
        <div style="float:left;width:20em;background-color:blue;">this is left</div>
        <div style="float:right;width:20em;background-color:red;">this is right</div>
    </div>  
</div>
于 2013-05-22T05:57:46.327 に答える