html - Formating a database generated list of links into 4 columns -


i have database query returns ilist 12 results in it. each result link , format results 4 lists of 3 results side side, kind of this:

item1       item4       item7       item10 item2       item5       item8       item11 item3       item6       item9       item12 

also, cannot hard code because query results range 4 16. know want 4 columns , want co in ascending order filling in first column, second, third, , fourth.

if you're looking html , css, try this:

html

<div class="ilist">   <div class="column">     <span class="item">item1</span>     <span class="item">item2</span>     <span class="item">item3</span>     <span class="item">item4</span>   </div>   <div class="column">     <span class="item">item5</span>     <span class="item">item6</span>     <span class="item">item7</span>     <span class="item">item8</span>   </div>   <div class="column">     <span class="item">item9</span>     <span class="item">item10</span>     <span class="item">item11</span>     <span class="item">item12</span>   </div>   <div class="column">     <span class="item">item13</span>     <span class="item">item14</span>     <span class="item">item15</span>     <span class="item">item16</span>   </div> </div> 

css

.ilist {   overflow-y:hidden; } .column {   float:left;   width:200px; /* want specify                   appropriate width */ } .column .item {   display:block;   height:1em; } 

take note though won't work in event 2 items in row (like item1 , item7) won't have same height.

so won't work when have/need this:

item1       item4       item7       item10             item4 item2       item5       item8       item11 item3       item6       item9       item12 

if you're looking c# try this:

ilist ilist = /* ... */; using (htmltextwriter writer = new htmltextwriter(stringwriter)) {  writer.addattribute(htmltextwriterattribute.class, "ilist");  writer.renderbegintag(htmltextwritertag.div);  for(int i=0; i<ilist.count; i++) {   writer.addattribute(htmltextwriterattribute.class, "column");   writer.renderbegintag(htmltextwritertag.div);   (int j = i; j <= (i/4) && i<ilist.count; j++, i++)   {    writer.addattribute(htmltextwriterattribute.class, "item");    writer.renderbegintag(htmltextwritertag.span);    writer.writeencodedtext(ilist[i]);    writer.renderendtag();   }   writer.renderendtag();  }  writer.renderendtag();  } 

... of course need still <link> css.


Comments

Popular posts from this blog

c++ - Convert big endian to little endian when reading from a binary file -

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -

unicode - Are email addresses allowed to contain non-alphanumeric characters? -