0

我在http://jobajoba.org上发布了一个测试站点，其中显示了一些基础 4 元素。

我正在使用 vanilla out-of-boxfoundation 4 框架，但在列表中显示为项目符号项目的灯箱拇指有问题（它们应该在类似于页面上显示的“块网格”示例的行中）。

我不知道我做错了什么......请注意，页面上的所有其他内容似乎都是开箱即用的。

编辑时：

我忘记了这个问题，但是在我发布这个问题大约一个月后，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's documentation examples uses a custom docs.css file: http://foundation.zurb.com/docs/assets/docs.css

The styles for the Clearing Lightbox found under the heading /* Clearing Styles */ are exactly the same as those included in the vanilla download. However, the file also has an extra section specifically for the documentation example.

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

Adding these rules to your own css file should provide the layout you're looking for.

于 2013-04-25T18:59:46.463 回答