Zurb foundation 允许在基础上具有列类的哪些标记

Zurb foundation 允许在基础上具有列类的哪些标记,zurb-foundation,css,responsive-design,Zurb Foundation,Css,Responsive Design,我有使用版本5的网格结构。我使用除div之外的一些元素来处理行或列,例如新的HTML5标记,如nav、header等。这会导致网格布局出现问题吗 我问这个问题是因为有一列似乎不在网格中。i、 e其高度比相邻立柱短: <header id="header" class="row"> <div id="logo" class="small-4 large-4 columns"> <div id="site-logo"><a hre

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

我问这个问题是因为有一列似乎不在网格中。i、 e其高度比相邻立柱短:

<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元件中的导航高度非常短,不能覆盖其相邻列的所有高度

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

按您的预期工作时,列的高度不等于行的高度。它没有设置高度,因此它仅在“子元素”的“高度”处

如果想要相同的高度,则必须设置最小高度

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

与第二列一样,上面的div将具有子元素的高度