membuat layout mengular dua-kolom dalam ASP.NET

A    F    L 
B    G    M 
C    H    N 
D    I    O 
E    K    ... 

<% var rows = source.Count()/3 + 1; %> 
<table> 
    <% for(int i=0; i<rows; i++) { %> 
    <tr> 
        <td><%= source.Skip(i).FirstOrDefault() %></td> 
        <td><%= source.Skip(i+rows).FirstOrDefault() %></td> 
        <td><%= source.Skip(i+rows*2).FirstOrDefault() %></td> 
    </tr> 
    <% } %> 
</table> 

Anda memerlukan Container dengan Unsur-unsur seperti

<div id="npContainer"> 
  <div class="npItem">Item1</div> 
  <div class="npItem">Item2</div> 
</div> 

... Dan Anda memerlukan Kolom

<div id="npColumn1"></div> 
<div id="npColumn2"></div> 
<div id="npColumn3"></div> 

Dalam Javascript hanya panggilan:

jQuery().npColumns(); 

Jika Anda selalu ingin 3 kolom ini harus mudah dengan kode sisi server kecil dan CSS - pada dasarnya untuk setiap item Anda menulis sesuatu seperti:

<li>item</li> 

Kemudian pada count/3 dan count*2/3 Tambahkan:

</ul><ul> 

Sehingga Anda berakhir dengan sesuatu seperti:

<style> 
    .three-column-panel > ul {  
        float:left; width:33%; list-style-type: none; text-indent:0; } 
</style>     
<div class="three-column-panel"> 
    <ul> 
        <li>a</li> 
        <li>b</li> 
        <li>c</li> 
    </ul> 
    <ul> 
        <li>d</li> 
        <li>e</li> 
        <li>f</li> 
    </ul> 
    <ul> 
        <li>g</li> 
        <li>h</li> 
    </ul> 
</div> 

html dapat (sebenarnya doesnt benar-benar penting):

<div class="3col_vert"> 
    <div>a</div> 
    <div>b</div> 
    <div>c</div> 
    <div>d</div> 
    ... 
</div> 

Dalam javascripts (contoh di jquery khususnya), Anda harus membungkusnya dengan cols, sehingga html yang dihasilkan (setelah manipulasi javascript) akan menjadi:

<div class="3col_vert"> 
    <div class="col_left"> 
        <div>a</div> ... 
    </div> 
    <div class="col_centre"> 
        <div>e</div> ... 
    </div> 
    <div class="col_right"> 
        <div>g</div> ... 
    </div> 
</div> 

Jquery untuk mainpulate akan menjadi:

var vert_divs = $(".3col_vert div"); 
// Remove them from parent 
$(".3col_vert").empty() 
    .append("<div class='col_left'></div>") // append the wrapper cols to parent 
    .append("<div class='col_center'></div>") 
    .append("<div class='col_right'></div>"); 
// Now place them to the wrappers 
var totalDivs = vert_divs.length; // count number of match divs 
vert_divs.each(function(i) { 
    if (i < totalDivs / 3) 
        $(this).appendTo(".3col_vert div.col_left"); 
    else if (i<totalDivs * 2/3) 
        $(this).appendTo(".3col_vert div.col_center"); 
    else 
        $(this).appendTo(".3col_vert div.col_right"); 
}); 

Kode di atas tidak terlalu dioptimalkan (saya yakin banyak algoritma yang lebih baik dapat melakukannya), tetapi ide itu ada, Anda menggunakan javascript untuk memanipulasi html menjadi sesuatu yang seperti di atas satu, dengan menempatkan kolom kiri pertama 1 / 3 untuk , kedua 1 / 3 ke pusat, dan sisanya ke kanan. Pekerjaan terakhir adalah CSS digunakan untuk membuat mereka menjadi 3 kolom, yang saya tidak akan menutupi di sini tetapi ada ton tutorial di luar sana, misalnya, yang satu ini adalah salah satu contoh.