Question

这个问题与I asked earlier类似，但这次我尝试使用不同的方法来实现布局：网格，而不是块网格。

我阅读了ZURB关于How to bridge rows in Foundation的文章，但最终结果偏离了我的期望。第一行和第二行之间没有边距。那么我如何才能使这个边际起作用，你在文章的picture中看到了什么？

这是我到目前为止所得到的：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>

Answer 1

向行div <div class="row custom">添加一个类，然后在类

中添加一个填充

.row .custom {
padding-bottom: 10px;
}

更新了小提琴http://jsfiddle.net/NPUHy/1/

如何在Foundation中桥接行

1 个答案: