DIV布局两列格式

我需要显示在第一列两种栏格式的类别列表中显示1-7 &第二栏，显示7-15类别DIV布局两列格式

我使用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，我不想在代码后面使用文字控制&我们的设计要求可能在不久的将来。 ISo我想实现这个使用CSS或jQuery。

我也试过，没有工作

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>

来源

2013-05-22 Learning

看是否有此提琴足够：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-22 06:26:51 mshsayem

作品像一个魅力...感谢 – Learning

Mr.Mshsayem好帖子。谢谢。 Mr.Mshsayem和KnowledgeSeeker我在Mr.Mshsayem发布的小提琴中做了一些改变。请看看http://jsfiddle.net/G7Uk2/6/。这将处理奇数和事件数量的菜单项，并处理'n'个项目（由Mr.Mshsayem处理我的知识后处理多达14个菜单项）我知道这个问题的要求只有14个菜单项。只是为了更多的信息，我发布了这个小提琴链接。 – vinothini

不同的CSS属性这是正确的

<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-22 05:57:46 manish

看看我的更新。正如我刚才提到的，我正在使用asp.ner中继器控制，我不能告诉我们这一点。我的列表是从数据库生成的。 – Learning

我之前发布此更新，所以我没有得到那 – manish

DIV布局两列格式

回答

相关问题