विभिन्न ऊंचाइयों के ब्लॉक के साथ तीन कॉलम लेआउट

Question

मेरे पास ट्विटर बूटस्ट्रैप के आधार पर सरल 3-कॉलम लेआउट है। एकमात्र समस्या यह है कि प्रत्येक स्तंभ को विभिन्न ऊंचाइयों के साथ ब्लॉक से इकट्ठा किया जाता है।

<div class="container"> 
    <div id="blocks" class="row"> 
     <div class="span4"> 
      <div class="block" id="block1"> 
      <div class="block" id="block4"> 
      <div class="block" id="block7"> 
     </div> 
     <div class="span4"> 
      <div class="block" id="block2"> 
      <div class="block" id="block5"> 
      <div class="block" id="block8"> 
     </div>    
     <div class="span4"> 
      <div class="block" id="block3"> 
      <div class="block" id="block5"> 
      <div class="block" id="block9"> 
     </div> 
    </div> 
</div> 

।

यह छोटे डिस्प्ले को छोड़कर, काफी ठीक काम करता है। फिर ब्लॉक का क्रम क्रमबद्ध नहीं है।

वहाँ किसी तरह किसी भी जावास्क्रिप्ट के बिना क्रमबद्ध ब्लॉक हासिल करने के लिए है?

Answer 1

3 कॉलम संरचना के साथ इस प्रभाव को प्राप्त करने का कोई तरीका नहीं है। यदि ब्लॉक सभी एक ही ऊंचाई थे तो आप फ्लोट कर सकते थे: कॉलम के बिना सभी ब्लॉक छोड़ दिया तो वे क्रम में लपेटेंगे। आप चिनाई के रूप में उपयोग करने के लिए JavaScript इस तरह होता है क्योंकि वे एक ही आकार नहीं हैं:

http://masonry.desandro.com/

Answer 2

इसका वाला इस लक्ष्य को हासिल करने के लिए काफी मुश्किल हो, तो आप नाव के साथ एक सूची के साथ खेलने के आसपास करना चाहते हो सकता है: छोड़ा; या प्रदर्शन: इनलाइन-ब्लॉक;

या

आप सीएसएस अंदर @media साथ सूची के 2 सेट है, तो स्क्रीन आकार पर निर्भर कर सकता आप दिखाना या चयनित div

सीएसएस उदाहरण

@media screen and (min-width: 768px) and (max-width: 1024px) { 
.displayFullScreen {display: block;} 
.displayMobileScreen {display: none;} 
} 


@media screen and (max-width: 767px) { 
.displayFullScreen {display: none;} 
.displayMobileScreen {display: block;} 
}