2

我需要以两列格式显示类别列表，第一列显示 1-7，第二列显示 7-15 个类别

我正在使用 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，我不想使用文字控制从代码隐藏中实现它，我们的设计要求可能在不久的将来。我想使用 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 回答