Zurb Foundation 中的嵌套网格问题

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

很难说到底是什么问题。您正在覆盖许多基础样式。一堆 div 上的高度、边距等。

1) 您正在将希望对齐的背景颜色应用于<h2>。我建议将其应用于包含<div>。 h2 永远不会做 div 的边缘，因此您将无法对齐它们。

2) 将颜色应用于背景的日期。它们可能已经对齐。如果你改变上面的。

3) 对于嵌套网格的故障排除，很容易将panel 类添加到所有它们，这会增加间距但让您看到每个嵌套网格之间的关系。

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

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