整合Zurb基金會清算與砌體

Question

我正在爲我的妻子建立一個投資組合，並且我剛剛開始獲得足夠的知識以實現目標。 我正在使用Zurb基金會作爲起點，並試圖將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的基金會與Desandro的砌體結合起來的方式有點棘手，有一個類似的問題，我提供了一個答案，以及一個鏈接到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>