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佈局兩列格式

回答

相關問題