फाउंडेशन में पंक्तियों को कैसे पुल करें - ज़र्ब-फाउंडेशन

यह सवाल एक जैसा है मैंने पहले पूछा था, लेकिन इस बार मैं एक अलग दृष्टिकोण का उपयोग कर लेआउट प्राप्त करने की कोशिश कर रहा हूं: ग्रिड, ब्लॉक-ग्रिड नहीं।

मैंने ज़ुरब के लेख को पढ़ा फाउंडेशन में पंक्तियों को कैसे पुल करें, लेकिन अंतिम परिणाम मेरी अपेक्षा से विचलित हो जाता है। पहली और दूसरी पंक्ति के बीच कोई मार्जिन नहीं है। तो मैं उस मार्जिन को काम करने के लिए कैसे प्राप्त करूं, जिसे आप देखते हैं चित्र लेख पर?

यही वह है जो मुझे अब तक मिला है: http://jsfiddle.net/NPUHy/

पहले दृष्टिकोण

<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>

दूसरा दृष्टिकोण

<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>

उत्तर:

जवाब के लिए 0 № 1

पंक्ति div में एक वर्ग जोड़ें<div class="row custom">, और उसके बाद कक्षा में एक पैडिंग जोड़ें

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

अद्यतन पहेली http://jsfiddle.net/NPUHy/1/


संबंधित सवाल
सबसे लोकप्रिय