Wie man Zeilen in Foundation - zurb-foundation überbrückt

Diese Frage ähnelt einer Ich habe früher gefragt, aber diesmal versuche ich, das Layout mit einem anderen Ansatz zu erreichen: Gitter, nicht Blockraster.

Ich habe den Artikel von ZURB gelesen Wie man Zeilen in der Grundlage überbrückt, aber das Endergebnis weicht von meinen Erwartungen ab. Es gibt keinen Spielraum zwischen der ersten und der zweiten Reihe. Also, wie bekomme ich diese Marge zu arbeiten, die Sie in der sehen Bild bei dem Artikel?

Das habe ich bis jetzt erreicht: http://jsfiddle.net/NPUHy/

Erste Ansatz

<div class="row">
<div class="small-9 small-centered column">
<div class="row">
<div class="small-4 column">
<img src="/images/http://placehold.it/256x512&text=PANEL"/>
</div>
<div class="small-8 column">
<div class="row">
<div class="small-6 column">
<img src="/images/http://placehold.it/256&text=ROW-1"/>
</div>
<div class="small-6 column">
<img src="/images/http://placehold.it/256&text=ROW-1"/>
</div>
</div>
<div class="row">
<div class="small-6 column">
<img src="/images/http://placehold.it/256&text=ROW-2"/>
</div>
<div class="small-6 column">
<img src="/images/http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
</div>
</div>
</div>

Zweiter Ansatz

<div class="row">
<div class="small-9 small-centered column">
<div class="row">
<div class="small-4 columns">
<img src="/images/http://placehold.it/256x512&text=PANEL"/>
</div>
<div class="small-4 columns">
<div class="row">
<div class="small-12 columns">
<img src="/images/http://placehold.it/256&text=ROW-2"/>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<img src="/images/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="/images/http://placehold.it/256&text=ROW-2"/>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<img src="/images/http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
</div>
</div>
</div>

Antworten:

0 für die Antwort № 1

füge eine Klasse zur Zeile div hinzu<div class="row custom">, und fügen Sie der Klasse dann eine Auffüllung hinzu

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

aktualisierte Geige http://jsfiddle.net/NPUHy/1/


Verwandte Fragen