0

我正在为我的妻子建立一个投资组合，并且我刚刚开始获得足够的知识来实现​​它。我以 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

4

2 回答 2

0

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

将 jquery masonry 集成到 zurb 基础网格中

于 2013-10-23T20:44:24.450 回答
0

感谢您的回答。从那以后，我已经弄清楚了，并且我正在使用该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>
于 2013-10-24T20:48:54.593 回答