这个问题类似于我之前问过的一个问题,但这次我试图使用不同的方法实现布局:网格,而不是块网格。
我读了ZURB关于如何在Foundation中桥接行的文章,但最终结果偏离了我的期望。第一行和第二行之间没有空白。那么我该如何让这些边距发挥作用呢,就像你们在文章的图片中看到的那样?
这是我目前得到的:http://jsfiddle.net/NPUHy/
第一种方法<div class="row">
<div class="small-9 small-centered column">
<div class="row">
<div class="small-4 column">
<img src="http://placehold.it/256x512&text=PANEL"/>
</div>
<div class="small-8 column">
<div class="row">
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-1"/>
</div>
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-1"/>
</div>
</div>
<div class="row">
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
</div>
</div>
</div>
第二种方法
<div class="row">
<div class="small-9 small-centered column">
<div class="row">
<div class="small-4 columns">
<img src="http://placehold.it/256x512&text=PANEL"/>
</div>
<div class="small-4 columns">
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
<div class="small-4 columns">
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
</div>
</div>
</div>
添加一个类到行div <div class="row custom">
,然后添加一个填充到类
.row .custom {
padding-bottom: 10px;
}
更新提琴http://jsfiddle.net/NPUHy/1/