两列格式的 DIV 布局答案

【问题标题】：DIV layout in two column format两列格式的 DIV 布局
【发布时间】：2013-05-22 14:42:18
【问题描述】：

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

我正在使用 ASP.Net 转发器控件来显示我的类别，就像在 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，我不想使用文字控制从代码隐藏中实现，我们的设计要求可能在不久的将来。我想用 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>

【问题讨论】：

标签： jquery asp.net css html

【解决方案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");
}

【讨论】：

像魅力一样工作......谢谢
Mshsayem 先生的好帖子。谢谢。 Mr.Mshsayem 和 KnowledgeSeeker 我对 Mr.Mshsayem 发布的小提琴做了一些改动。请查看jsfiddle.net/G7Uk2/6。这将处理菜单项的奇数和事件数，并处理“n”个项目（据我所知，Mshsayem 先生的帖子最多可处理 14 个菜单项）我知道这个问题的要求只有 14 个菜单项。只是为了了解更多信息，我发布了这个小提琴链接。

【解决方案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>

【讨论】：

看看我的更新。正如我所提到的，我正在使用 asp.ner 中继器控制，我不能这样做。我的列表是从数据库生成的。