0

私はhttp://jobajoba.orgにいくつかの Foundation 4 要素を示すテスト サイトを投稿しました。

バニラのすぐに使用できる Foundation 4 フレームワークを使用していますが、ライトボックスのサムがリストに箇条書き項目として表示されることに問題があります (ページに表示されている「ブロック グリッド」の例のように一列に並んでいる必要があります)。

何が間違っているのかわかりません...ページの他のすべてがそのままで動作するように見えることに注意してください。

編集時:

この質問を忘れていましたが、これを投稿してから約 1 か月後、Zurb はブロック グリッドを使用して効果を作成したことを示しました。このようなものが私のために働いた：

<div>
    <ul class="large-block-grid-4 small-block-grid-2" data-clearing>
        <li>
            <a href="http://foundation.zurb.com/docs/img/demos/demo1.jpg" class="th">
           <img src="http://foundation.zurb.com/docs/img/demos/demo1-th.jpg" data-caption="THIS IS CAPTION 1">
            </a>
        </li>
        <li>
          <a href="http://foundation.zurb.com/docs/img/demos/demo2.jpg" class="th">
            <img src="http://foundation.zurb.com/docs/img/demos/demo2-th.jpg" data-caption="THIS IS CAPTION 2">
          </a>
        </li>
        <li>
          <a href="http://foundation.zurb.com/docs/img/demos/demo3.jpg" class="th">
            <img src="http://foundation.zurb.com/docs/img/demos/demo3-th.jpg" data-caption="">
          </a>
        </li>
        <li>
          <a href="http://foundation.zurb.com/docs/img/demos/demo4.jpg" class="th">
            <img src="http://foundation.zurb.com/docs/img/demos/demo4-th.jpg" data-caption="">
          </a>
        </li>
      </ul>
    </div>
4

1 に答える 1

2

Foundation のドキュメントの例では、カスタムの docs.css ファイルを使用しています: http://foundation.zurb.com/docs/assets/docs.css

/* Clearing Styles */ という見出しの下にある Clearing Lightbox のスタイルは、バニラのダウンロードに含まれるものとまったく同じです。ただし、このファイルには、ドキュメントの例に特化した追加のセクションもあります。

/* Clearing Docs */
.clearing-thumbs { list-style: none; }
.clearing-thumbs li { float: left; margin-right: 10px; }

これらのルールを独自の css ファイルに追加すると、探しているレイアウトが提供されます。

于 2013-04-25T18:59:46.463 に答える