css 파일의 class 지정으로 2단 list 루프 돌리기

css 파일의 class 지정으로 2단 list 루프 돌리기

- 2단 계시판 형식일 때 사용

- 별도의 프로그램에서 처리없이 걍 하나의 class로 루프 돌림

1. css

- 양쪽 끝에 라인을 맞게 하기 위해 .productbox_u:nth-child(even), .productbox_u:nth-child(odd) 사용

- IE 8.0 이하의 경우 nth-~~ 필터가 먹지 않으므로 .productbox_u 기술

html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, address, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, select, textarea{margin:0; padding:0;} h1, h2, h3, h4, h5, h6{font-size:100%;} img, fieldset{border:none; outline:none;} a{outline:none;} table{border-collapse:collapse;} ul, ol, li{list-style:none;} address, em, optgroup{font-style:normal;} li img, object ,img{vertical-align:middle;} input, select, textarea, form img{vertical-align:middle;} p{line-height:18px; text-align:justify;} .floatL{float:left;} .floatR{float:right;} .clear{clear:both;} /*********상품박스on************/ .contents_u{ margin-top:20px; margin-left:4px; overflow:hidden;} .contents_u:nth-child(odd){ margin-top:20px; margin-left:0px; overflow:hidden;} .productbox_u{ width:460px; height:106px; border:#cec0ae solid 1px; position:relative; float:left; margin:0 9px 9px 0;} .productbox_u:nth-child(even){ width:460px; height:106px; border:#cec0ae solid 1px; position:relative; float:right; margin:0 0px 9px 0;} .productbox_u:nth-child(odd){ width:460px; height:106px; border:#cec0ae solid 1px; position:relative; float:left; margin:0 0px 9px 0;} .productbox_u span { position:absolute; left:0; top:0} .productbox_u .left_u{ height:86px; float:left; padding:10px;} .productbox_u .right_u{ height:96px; background:#fcf7c6; width:305px; float:left; padding:0px 15px 10px 10px; } .productbox_u .right_u p a { font-size:13px; color:#333333; font-weight:bold; display:block; height:30px; margin-top:0px; line-height:16px; letter-spacing:-1px; } .productbox_u .right_u ul { clear:both; } .productbox_u .right_u ul li { font-size:12px; color:#888888; text-align:left;} /*********************/

2. aspx

<div class="contents_u"> <% dt = ds.Tables[0]; %> <% for (int iIndex = 0; iIndex < dt.Rows.Count; iIndex++) { string value0_lst = dt.Rows[iIndex][0].ToString(); string value1_lst = dt.Rows[iIndex][1].ToString(); string value2_lst = dt.Rows[iIndex][2].ToString(); %> <div class="productbox_u"> <span><img src="http://www.culturehouse.com/images/pic1.jpg" /></span> <div class="left_u"> <div width="110" height="86"> <a href="javascript:goView(<%=value0_lst%>);"> <img src="<%=value1_lst%>" style="max-width:110px;max-height:86px;" alt="섬네일" width="110" height="86" /> </a> </div> </div> <div class="right_u"> <p><a href="javascript:goView(<%=value0_lst%>);"><%=value2_lst%></a></p> <ul> <li style="float:left;">등록자 : <%="test"%></li> <li style=" text-align:right;">거래유형 : <%="test"%></li> <li>등록일 : <%="test"%></li> <li style="float:left;">글번호 : <%="test"%> </li> <li style="float:right;">조회수 : <%="test"%></li> </ul> </div> </div><!-- //productbox_u --> <% } %> </div><!-- //contents_u -->