Question

有没有办法如何连续使用相同大小的7列？我希望在它上面做一个类似日历的网格。

 S  M  T  W  T  F  S
 _  _  _  _  _  _  _
|_||_||_||_||_||_||_|
|_||_||_||_||_||_||_|
|_||_||_||_||_||_||_|
|_||_||_||_||_||_||_|
|_||_||_||_||_||_||_|

一直在尝试，但我不能很好地定位它。任何帮助将非常感激。谢谢！

Answer 1

为了获得相同的行高，请使用均衡器，这是文档的链接 link

<div class="row" data-equalizer>
  <div class="large-7 columns">
  <div class="large-1 columns" data-equalizer-watch>
    ...
  </div>
  <div class="large-1 columns" data-equalizer-watch>
    ...
  </div>
  .
  .
  .
</div>
</div>

编辑：使用其他

<div class="large-5 columns">

如果您要显示除日历以外的其他内容，请在上一行div内。

如果你想拥有12个网格行结构和7个用于日历的列，你可以将网格居中。使用

<div class="row">
  <div class="large-7 large-centered columns">6 centered</div>
</div>

如果您只想为网页定制基础的七格结构。以下是自定义基础Link

的链接

Answer 2

您有两种选择：

使用基础的偏移网格：http://foundation.zurb.com/docs/components/grid.html

<div class="row">
      <div class="large-7 medium-7 medium-offset-5 columns end" >
          <div class="large-1 columns" >
            1
          </div>
          <div class="large-1 columns" >
            2
          </div>
          <div class="large-1 columns" >
            3
          </div>
          <div class="large-1 columns" >
            4
          </div>
          <div class="large-1 columns" >
            5
          </div>
          <div class="large-1 columns" >
            6
          </div>   
          <div class="large-1 columns" >
            7
          </div>           
     </div>
</div>

或者使用基础的课程结束

<div class="row">
      <div class="large-7 medium-7 columns end" >
          <div class="large-1 columns" >
            1
          </div>
          <div class="large-1 columns" >
            2
          </div>
          <div class="large-1 columns" >
            3
          </div>
          <div class="large-1 columns" >
            4
          </div>
          <div class="large-1 columns" >
            5
          </div>
          <div class="large-1 columns" >
            6
          </div>   
          <div class="large-1 columns" >
            7
          </div>           
     </div>
</div>

我为你做了一个 jsfiddle ！你可以看到差异！

使用zurb foundation 5连续7列

2 个答案: