我只会告诉你一个我创建的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 回答
很难说究竟是什么问题 . 你正在压倒很多基础风格 . 一堆div上的高度,边距等 .
1)您正在应用希望与
<h2>
对齐的背景颜色 . 我建议将它应用于包含<div>
. h2将永远不会执行div的边缘,因此您将无法对齐它们 .2)将颜色应用于背景的日期 . 他们可能已经对齐了 . 如果你改变了以上 .
3)对于嵌套网格的故障排除,很容易将
panel
类添加到所有这些,这将增加间距,但让你看到每个嵌套网格之间的关系 .这是基础4,但可能有用:
http://foundation.zurb.com/grid-example2.php