将 Zurb 基础清理与砌体相结合答案

【问题标题】：Integrating Zurb Foundation Clearing with Masonry将 Zurb 基础清理与砌体相结合
【发布时间】：2013-10-25 04:48:54
【问题描述】：

我正在为我的妻子建立一个投资组合，并且我刚刚开始获得足够的知识来实现它。我以 Zurb 基金会为起点，尝试将 Desandro 砌体与 Clearing 结合起来展示她的作品。如何将两者结合起来使用缩略图？我已经发布了两个标记结构示例。

这是 Masonry 的标记：

<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

【问题讨论】：

标签： html zurb-foundation jquery-masonry

【解决方案1】：

您必须将 Zurb 的 Foundation 与 Desandro 的 Masonry 集成的方式有点棘手，有一个类似的问题被问到，我提供了一个答案以及一个链接到托管在 github 上的两者的预制集成

integrating jquery masonry into a zurb foundation grid

【讨论】：

【解决方案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>

【讨论】：