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
Post a Comment