벽돌집과 석조물 통합

Question

나는 아내를위한 포트폴리오를 만들고 있으며, 나는 그것을 실현하기에 충분한 지식을 얻기 시작했습니다. 저는 Zurb Foundation을 출발점으로 삼고 Desandro 벽돌과 Clearing을 결합하여 작업을 선보이고 자합니다. 둘을 결합하여 미리보기 이미지를 사용하여 작동되게하려면 어떻게해야합니까? 마크 업 구조의 두 가지 예를 게시했습니다.

<div class="row"> 
<div id="container" class="large-12 columns transitions-enabled large-centered clearfix"> 
    <div class="box col2" style="background: #2ADfFE"><h4>Ilustracions</h4></div> 
    <div class="box col2"><a href="#"><img src="img/1.jpg"/></a> 
    </div> 

여기 지우기위한 하나 : 여기

은 벽돌을위한 마크 업입니다

<ul class="clearing-feature" data-clearing> 
    <li class="clearing-featured-img"> 
     <a href="img/1.jpg" alt="1"> 
     <img class="thumbs" data-caption="1" src="img/thumb/1.jpg"> 
     </a> 
    </li> 
</ul> 

사람이 크게 감사하겠습니다 아이디어가있는 경우. 감사합니다. . C

Answer 1

Zurb 's Foundation과 Desandro의 Masonry를 통합하는 방법은 약간 까다 롭습니다. 비슷한 질문이 있습니다.이 질문에 대한 답은 물론, github에 호스팅 된 두 가지의 사전 통합에 대한 링크도 제공되어 있습니다. 답변에 대한

integrating jquery masonry into a zurb foundation grid

Answer 2

감사합니다. 나는 그걸 알아 냈으니 clearing-featured-img 클래스를 사용하여 내가 보여주고 싶은 것을 보여주고있다. 나는 그것이 완전히 의미 론적이라고 확신하지는 않지만 페이지는 w3c에 의해 검증된다. 마크 업은 다음과 같습니다.

<div class="row"> 
<div id="container" class="large-12 columns transitions-enabled large-centered clearfix"> 
<ul class="clearing-thumbs clearing-feature" data-clearing> 
    <li class="clearing-featured-img"><div class="box col2"><a href="img/...jpg"><img data-caption="..." src="img...jpg" alt=""/></a> 
    </div></li> 
    <li class="clearing-featured-img ilu"><div class="box col2"><a href="img/...jpg"><img data-caption="..." src="img...jpg" alt=""/></a> 
    </div></li>