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>

如果有人有想法，我将不胜感激。谢谢。 ç

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>

整合Zurb基金会结算与砌体

2 个答案: