2

我将向您展示我创建的一个 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”的橙色框的宽度相同。我以为我做对了一切，但显然我错过了一些东西。

4

1 回答 1

3

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

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

2）对于您将颜色应用于背景的日期。它们可能已经对齐。如果您更改上述内容。

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

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

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

于 2013-03-04T01:26:50.133 回答