css - 哪些标签允许在 Foundation 中具有列类

Question

我有网格结构使用 zurb-foundation版本 5。我使用除 div 之外的一些元素来处理行或列，例如新的 HTML5 标签，如 nav、header 等。这会导致网格布局出现问题吗？

我问这个问题是因为有一列似乎不在网格中。即它的高度比它的相邻列短:

<header id="header" class="row">
      <div id="logo" class="small-4 large-4 columns">
        <div id="site-logo"><a href="/4test/drupal-7.28/" title="Home">
          <img src="http://localhost/4test/drupal-7.28/sites/default/files/ari_0.png" alt="Home">
        </a></div>        
          <a href="/4test/drupal-7.28/" title="Home"><span>Drupal Test</span></a>

      </div>
      <nav id="navigation" role="navigation" class="small-8 large-8 columns">
        <div id="main-menu" class="row">
    <div class="small-12 large-12 columns">
          <ul class="sub-nav"><li class="first leaf active"><a href="/4test/drupal-7.28/" title="" class="active">Home</a></li>
<li class="leaf"><a href="/4test/drupal-7.28/blog" title="the blog">Blog</a></li>
<li class="last leaf"><a href="/4test/drupal-7.28/node/4">About us</a></li>
        </ul>        </div></div>
      </nav>
    </header>

在上述代码中，inspect 元素中的导航高度非常短，没有覆盖其相邻列的所有高度。

以下屏幕截图展示了这种情况:

Answer 1

它的工作方式与您预期的一样，该列不占行的高度。它没有设置高度，所以它只和子元素一样高。

如果你想要相同的高度，你必须设置一个最小高度。

  <div id="logo" class="small-4 large-4 columns">

上面的这个 div 将具有子元素的高度，第二列也是如此

here is my test