Question

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

我使用ASP.Net转发器控件来显示我的类别＆amp;像jsFiddle Example

中的节目一样

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

我想要的输出应该显示为

这种格式是否可以使用CSS或者必须使用jQuery，我不想在代码隐藏中使用文字控制＆amp;我们的设计要求可能在不久的将来。我想用CSS或jQuery实现这个目的。

我还尝试了不起作用的不同css属性

HTML CODE示例

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

Answer 1

看看这个小提琴是否足够：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");
}

Answer 2

这没关系

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

DIV布局采用两列格式

2 个答案: