与Zurb基础网格嵌套问题

Question

我就告诉你我已经创建了一个的jsfiddle来说明我想要实现：

http://jsfiddle.net/vraG7/3/embedded/result/

下面是这部分的代码：

<div class="row"> 
    <div class="twelve columns"> 
     <h2 class="first_column category_title">Nome Categoria</h2> 

     <div class="row"> 
      <div class="nine columns thumbnail"><img 
       src="http://www.placehold.it/125x125" alt=""></div> 
      <div class="three columns date"><time 
       datetime="2013-02-28" >28<br>02<br>2013</time></div> 
     </div> 
     <div class="row"> 
      <div class="twelve columns"> 
       <h2 class="post-title"><a href="">Titolto del post</a></h2> 
      </div> 
     </div> 
    </div> 
</div> 


</div> <!-- category-column --> 

我想要做的是让125x125图像和日期框在其右侧与橙色框与“Nome categoria”具有相同的宽度。我以为我做的都对，但显然我错过了一些东西。

Answer 1

很难说究竟是什么问题。你压倒了很多基础风格。高度，边距等一堆divs上。

1）您正在将希望对齐的背景颜色应用到<h2>。我建议将它应用于包含<div>。 h2永远不会做div的边缘，因此你将无法对齐它们。 2）你将颜色应用到背景的日期。它们可能已经对齐了。如果你改变上述。 3）对于嵌套网格进行故障排除，很容易将panel类添加到所有这些类中，这会增加间距，但让您看到每个嵌套网格彼此之间的关系。

这是基础4，但可能是有用的：

http://foundation.zurb.com/grid-example2.php