html - 如何在 zurb 5 foundation 中制作 5 列行

Question

我想在 row 中有 5 列，对于宽度小于 480 像素的小型设备屏幕只有 1 列。

我是 zurb foundation 的新手，仍在学习它。

fiddle 示例 http://jsfiddle.net/V7TuY/1/

<div class="row">
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 1]" />
        <p></p>
    </div>
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 2]" />
        <p></p>
    </div>
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 3]" />
        <p></p>
    </div>
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 4]" />
        <p></p>
    </div>
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 5]" />
        <p></p>
    </div>

这种东西用列好还是用列表好 ul li

Answer 1

The foundation grid is based on 12 "units" per row .在您的示例中，您有 5 <div>与类 medium-3和 large-3 = 每行 15 个单位。 Foundation 将设法将前 4 个放入(4 * 3 = 12 个单位)，然后将第五个推到下面的行。

适合您的 5 件元素的一个想法是给所有元素都赋予 medium-2宽度(10 个单位)，并将行偏移一个 unit在左侧(类 medium-offset-1 on first element )并告诉 Foundation 第五个元素是您行中的最后一个(类 end on the last element )。

例如:

<div class="row">

  <div class="small-12 medium-2 medium-offset-1 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-12 medium-2 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-12 medium-2 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-12 medium-2 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-12 medium-2 columns end">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>

</div>

http://jsfiddle.net/V7TuY/4/

点medium-offset-1是将内容居中(以某种方式):您有 10 个单位可以放入可能的 12 个单位。偏移一个，然后使用 end将在内容的每一侧留下 1 个单位的间隙。但是，如果您希望它位于页面左侧，只需删除 medium-offset-1上例中的类。

注意 - 你真的只需要 medium-2和 medium-offset-2默认情况下，这适用于 large网格也是，除非被类覆盖large-*或 large-offset-* .