首页 文章

Zurb Foundation中嵌套网格的问题

提问于
浏览
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”的橙色框的宽度相同 . 我以为我做的一切都很对,但显然我错过了一些东西 .

1 回答

  • 3

    很难说究竟是什么问题 . 你正在压倒很多基础风格 . 一堆div上的高度,边距等 .

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

    2)将颜色应用于背景的日期 . 他们可能已经对齐了 . 如果你改变了以上 .

    3)对于嵌套网格的故障排除,很容易将 panel 类添加到所有这些,这将增加间距,但让你看到每个嵌套网格之间的关系 .

    这是基础4,但可能有用:

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

相关问题