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