0

私は妻のためにポートフォリオを作成しており、それを実現するための十分な知識を習得し始めています。私は Zurb Foundation を出発点として使用し、Desandro の石積みと Clearing を組み合わせて彼女の作品を紹介しようとしています。2つを組み合わせてサムネイルを使用するにはどうすればよいですか? マークアップ構造の例を 2 つ投稿しました。

メーソンリーのマークアップは次のとおりです。

<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>

誰かがアイデアを持っていれば、それは大歓迎です。ありがとう。ハ

4

2 に答える 2

0

Zurb's Foundation と Desandro's Masonry を統合する方法は少しトリッキーです。同様の質問がありましたが、回答を提供し、github でホストされている 2 つの既製の統合へのリンクを提供しました。

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 に答える