CSS를 사용하여 표에서 표 갤러리 만들기

Question

liveScroll을 true로 설정하여 이미지 묶음을 추가하는 데 사용하는 dataTable이 있습니다. 이것은 html로 테이블을 만들고 각 행은 'ui-datatable-odd'또는 'ui-datatable-even'클래스를가집니다. CSS를 사용하여 행 당 두 개의 이미지가있는 표 갤러리를 격자 갤러리로 표시하려고합니다.

<h:form> 
<p:dataTable id="campaignDataGrid" var="campaignImage" value="#{allCampaignImages}" 
    scrollRows="9" scrollHeight="500" scrollable="true" liveScroll="true"> 

    <!-- <p:column> 
     Description: <h:outputText value="#{campaignImage.description}" /><br /> 
     Location: <h:outputText value="#{campaignImage.location}" /> 
    </p:column> --> 

    <p:column> 
     <div class="cell"> 
      <p:graphicImage value="#{campaignImage.url}" /> 
     </div> 
    </p:column> 

</p:dataTable> 

나는 단순히 CSS를 위해 이것을 사용했습니다 :

<div id="j_idt40:campaignDataGrid" class="ui-datatable ui-widget ui-datatable-scrollable"><div class="ui-widget-header ui-datatable-scrollable-header"><div class="ui-datatable-scrollable-header-box"><table role="grid"><thead><tr role="row"><th id="j_idt40:campaignDataGrid:j_idt42" class="ui-state-default" role="columnheader"><div class="ui-dt-c"><span></span></div></th></tr></thead></table></div></div><div class="ui-datatable-scrollable-body" style="height:500px;"><table role="grid"><tbody id="j_idt40:campaignDataGrid_data" class="ui-datatable-data ui-widget-content"><tr data-ri="0" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell"><div class="ui-dt-c"> 
        <div class="cell"><img id="j_idt40:campaignDataGrid:0:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/188" alt="" /> 
        </div></div></td></tr><tr data-ri="1" class="ui-widget-content ui-datatable-odd" role="row"><td role="gridcell"><div class="ui-dt-c"> 
        <div class="cell"><img id="j_idt40:campaignDataGrid:1:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/182" alt="" /> 
        </div></div></td></tr><tr data-ri="2" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell"><div class="ui-dt-c"> 
        <div class="cell"><img id="j_idt40:campaignDataGrid:2:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/178" alt="" /> 
        </div></div></td></tr><tr data-ri="3" class="ui-widget-content ui-datatable-odd" role="row"><td role="gridcell"><div class="ui-dt-c"> 
        <div class="cell"><img id="j_idt40:campaignDataGrid:3:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/173" alt="" /> 
        </div></div></td></tr><tr data-ri="4" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell"><div class="ui-dt-c"> 
        <div class="cell"><img id="j_idt40:campaignDataGrid:4:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/168" alt="" /> 
        </div></div></td></tr><tr data-ri="5" class="ui-widget-content ui-datatable-odd" role="row"><td role="gridcell"><div class="ui-dt-c"> 
        <div class="cell"><img id="j_idt40:campaignDataGrid:5:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/163" alt="" /> 
        </div></div></td></tr><tr data-ri="6" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell"><div class="ui-dt-c"> 
        <div class="cell"><img id="j_idt40:campaignDataGrid:6:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/158" alt="" /> 
        </div></div></td></tr><tr data-ri="7" class="ui-widget-content ui-datatable-odd" role="row"><td role="gridcell"><div class="ui-dt-c"> 
        <div class="cell"><img id="j_idt40:campaignDataGrid:7:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/153" alt="" /> 
        </div></div></td></tr><tr data-ri="8" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell"><div class="ui-dt-c"> 
        <div class="cell"><img id="j_idt40:campaignDataGrid:8:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/148" alt="" /> 
        </div></div></td></tr></tbody></table></div><div class="ui-widget-header ui-datatable-scrollable-footer"><div class="ui-datatable-scrollable-header-box"><table role="grid"><tfoot></tfoot></table></div></div><input type="hidden" id="j_idt40:campaignDataGrid_scrollState" name="j_idt40:campaignDataGrid_scrollState" autocomplete="off" value="0,0" /></div><script id="j_idt40:campaignDataGrid_s" type="text/javascript">PrimeFaces.cw('DataTable','widget_j_idt40_campaignDataGrid',{id:'j_idt40:campaignDataGrid',scrollable:true,liveScroll:true,scrollStep:9,scrollLimit:38});</script><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="6974751656016471616:-1737664871390977073" autocomplete="off" /> 

:

여기

.ui-datatable-odd { 
    position: relative; 
    display: block; 
    left: 360px; 
    bottom: 316px; 
} 

생성 된 HTML 코드의 다음은 내 primeFaces 코드,210

는 그리고 이것은 같은 모습입니다 : 그래서

, 당신이 볼 수 있듯이, 문제는 내가 홀수 행을 배치 할 때, 해당 행은 아직 컨텐츠가 이동 된 경우에도이 있다는 것입니다. 아무도 그걸 도와 줄 수 있니? 명확한를 내가 모두 홀수 및 짝수 거래 정보 저장소를 떠 http://jsfiddle.net/dPKBR/

와 한 :

Answer 1

나는 당신의 HTML/CSS와 함께 놀았이 함께했다 모두 짝수 거래 정보 저장소에 :

.ui-datatable-odd { 
    width:100px; 
    background:orange; 
    float:left; 
    position: relative; 
    display: block; 

} 

.ui-datatable-even{ 
    clear:both; 
    width:100px; 
    background:lime; 
    float:left; 
    position: relative; 
    display: block; 
} 

문제를 푸는 데 더 가까워 야합니다.