मार्जिन इनलाइन ब्लॉक को अलग-अलग ऊंचाइयों के साथ कैसे अनदेखा करें?

Question

मुझे एक समस्या है जहां ब्लॉक 2 से ढेर होते हैं, और अगले 2 ब्लॉक पहले 2 ब्लॉक के अंत में शुरू होते हैं। जैसा कि this JSFiddle demo में दिखाया गया है।

HTML:

<div class="container"> 
    <div class="inline"> 
    A div with less content than that one > 
    </div> 
    <div class="inline"> 
    A div with more content than the one on the left. Now Inline 3 goes down to where this div ends. I want to move it up however, so it's right under the div that's above Inline 3. 
    </div> 
    <div class="inline"> 
    Inline 3 
    </div> 
    <div class="inline"> 
    Inline 4 
    </div> 
</div> 

सीएसएस:

.container { 
    width:600px; 
    background-color:rgb(40,40,40); 
} 

.inline { 
    width:calc(50% - 22px); 
    display:inline-block; 
    vertical-align:top; 
    color:white; 
    background-color:#e74c3c; 
    text-align:center; 
    margin:5px 10px; 
} 

आउटपुट:

नोट:यह शीर्ष दाएं div द्वारा बनाई गई सफेद जगह नहीं लेता है।

नोट::

अपेक्षित/आउटपुट चाहता थाइस खाली स्थान के का उपयोग करना है।

मुझे पता है कि यह 2 कॉलम के साथ संभव है, लेकिन मैं 2 कॉलम का उपयोग नहीं करना चाहता। क्योंकि मैं कॉलम में असमान सामग्री के बिना कुछ div को हटाने में सक्षम होना चाहिए।

Answer 1

मुझे अपनी वेबसाइट पर एक ही समस्या थी। http://masonry.desandro.com/

Answer 2

आप column-count संपत्ति,

अवगत आइटम स्तंभ अवरोही क्रम में आदेश दिया जाएगा उपयोग करने का प्रयास कर सकते हैं: मैं हल करने के लिए है कि चिनाई का इस्तेमाल किया।

fiddle

Answer 3

यह करने के लिए एक द्वितीय श्रेणी जोड़कर सही करने के लिए और अधिक सामग्री नाव के साथ div करें।

एचटीएमएल

<div class="inline right"> 
    A div with more content than the one on the left. Now Inline 3 goes 
    down to where this div ends. I want to move it up however, so it's 
    right under the div that's above Inline 3. 
</div> 

सीएसएस

.right { 
    float: right; 
} 

fiddle