J'ai une structure de grille en utilisant zurb-foundation version 5. J'utilise certains éléments autres que div pour gérer des lignes ou des colonnes telles que les nouvelles balises HTML5 telles que nav, header, etc. Est-ce que cela pose des problèmes avec la disposition de la grille?
Je demande à ce sujet car il y a une colonne qui semble ne pas être dans la grille. sa hauteur est plus courte qu'avec ses colonnes voisines:
<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="/images/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>
Dans le code ci-dessus, la hauteur de navigation dans l'élément inspect est très courte et ne couvre pas toute la hauteur de ses colonnes voisines.
La capture d'écran suivante montre la situation:
Réponses:
1 pour la réponse № 1son fonctionnement comme vous attendez de la colonne ne prend pas la hauteur de la rangée. Il n'a pas de hauteur définie, donc il est seulement grand comme les éléments enfants.
Si vous voulez la même hauteur, vous devez définir une hauteur minimale.
<div id="logo" class="small-4 large-4 columns">
cette div ci-dessus aura la hauteur des éléments enfants, tout comme la deuxième colonne