2014-06-20 27 views
0

我有使用版本5的网格结构。我使用除div以外的一些元素来处理行或列,如新的HTML5标签,如导航,标题等。这是否会导致问题网格布局?哪些标签允许在基础中有列类

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

<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> 

在上述NAV高度的代码在检查元件是非常短的并且没有按不包括其相邻列的所有高度。

下面的屏幕截图展示了情况: enter image description here

回答

1

它的工作,你的预期列不走行的高度。它没有设置高度,因此它只与儿童元素一样高。

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

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

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

here is my test

相关问题