उत्तरदायी लेआउट असमान ऊंचाई

Question

मैं पिछले कुछ दिनों से एक निश्चित वेबपृष्ठ-डिजाइन से निपटने के तरीके के बारे में अपने सिर को लपेटने की कोशिश कर रहा हूं, लेकिन अब तक मैं किसी भी सुरुचिपूर्ण समाधान के साथ आने में सक्षम नहीं हूं।

डिजाइन को संक्षेप में सारांशित करने के लिए कंटेनर के 3 कॉलम हैं जहां कंटेनरों में असमान (गतिशील रूप से जेनरेट) ऊंचाइयों की समानता होती है लेकिन समान (तरल पदार्थ) चौड़ाई होती है। उन्हें बाहर रखा जाना चाहिए ताकि वे संख्यात्मक क्रम में बाएं से दाएं जा रहे हों; यानी शीर्ष पंक्ति पर 1-2-3, दूसरी पंक्ति पर 4-5-6 के बाद और इसी तरह।

अब, जो वास्तव में मेरे अखरोट को झुकाता है, वह इस लाइन को कंटेनरों के बीच बहुत अनावश्यक "ऊर्ध्वाधर अंतर" के बिना अच्छी तरह से बनाने की कोशिश कर रहा है। मैं वर्णन करने के लिए निम्नलिखित नकली कोड (कोड ब्लॉक के नीचे एक JSFiddle के रूप में भी उपलब्ध है) बना लिया है:

एचटीएमएल

<div class="wrapper" id="wrapper"> 
    <div class="container small" id="container_1">1</div> 
    <div class="container large" id="container_2">2</div> 
    <div class="container small" id="container_3">3</div> 
    <div class="container medium" id="container_4">4</div> 
    <div class="container small" id="container_5">5</div> 
    <div class="container medium" id="container_6">6</div> 
    <div class="container large" id="container_7">7</div> 
    <div class="container medium" id="container_8">8</div> 
    <div class="container large" id="container_9">9</div> 
    <div class="clearfix"></div> 
</div> 

सीएसएस

.wrapper { 
    width: 100%; 
    padding: 5%; 
} 
.clearfix { 
    clear: both; 
} 
.container { 
    display: block; 
    float: left; 
    width: 25%; 
    margin: 2.5%; 
    color: white; 
    font-weight: bold; 
    text-transform: uppercase; 
} 
.small { 
    height: 100px; 
    background: red; 
} 
.medium { 
    height: 150px; 
    background: green; 
} 
.large { 
    height: 200px; 
    background: blue; 
} 

JSFiddle : http://jsfiddle.net/tzikas/MYgNx/

नोट: चूंकि स्तंभ-लेआउट स्वयं अंततः बीआर डिवाइस-चौड़ाई के आधार पर ए/से नीचे दो/एक कॉलम में I JSFiddle में इसका अनुकरण करने के लिए एक सरल "टॉगल लेआउट" बटन शामिल था।

मैं यह जानने में सहायता चाहते हैं क्या इस प्रकार है:

1. मैं कैसे, के बीच अत्यधिक लंबवत स्पेसिंग से कैसे छुटकारा पाऊँ उदाहरण प्रति, "1" और "5" या "2" और " 6 "?
2. मैं को "3" के नीचे "1" से नीचे "4" के नीचे "4" कैसे प्राप्त करूं (जबकि पिछली बिंदु को हल करना)?

अधिमानतः मैं पटकथा के किसी भी प्रकार के माध्यम से डोम से छेड़छाड़ के बिना इस को हल करना चाहते हैं, लेकिन मैं तो mootools मेरी "पसंदीदा जहर।

Answer 1

अपनी आवश्यकताओं के अनुसार। आप इस के लिए http://masonry.desandro.com/ का उपयोग कर सकते है करने के लिए है, तो