एचटीएमएल - कॉलम अभी ऊंचाई

Question

उपेक्षा मैं इस है:

लेकिन मैं कुछ इस तरह की जरूरत है:

एचटीएमएल

<div id="content">  
     <div class="block" style="height:600px;"> 

     </div> 

     <div class="block" style="height:500px;"> 

     </div> 

     <div class="block" style="height:500px;"> 

     </div> 

     ... 
    </div> 

सीएसएस

.block 
{ 
    width:350px; 
    background-color:white; 
    border-radius:5px; 
    margin-right:80px; 
    margin-bottom:80px; 
    display:inline-block; 
} 

#content 
{ 
    position:relative; 
    display:inline; 
    overflow:auto; 
} 

मैं स्तंभों का उपयोग करने की कोशिश की, लेकिन वह अच्छी तरह से काम नहीं किया, यह एक स्तंभ केवल भले ही स्तंभ संख्या था दिखाया से अधिक 1.

Answer 1

यहाँ मेरी समाधान है:

HTML:

<div class="grid-container"> 
    <div class="third"> 
    <div class="grid grid1"> 
     <p>Grid 1</p> 
    </div> 
    <div class="grid grid2"> 
     <p>Grid 2</p> 
    </div> 
    </div> 
    <div class="third"> 
    <div class="grid grid3"> 
     <p>Grid 3</p> 
    </div> 
    <div class="grid grid4"> 
     <p>Grid 4</p> 
    </div> 
    </div> 
    <div class="third"> 
    <div class="grid grid5"> 
     <p>Grid 5</p> 
    </div> 
    <div class="grid grid6"> 
     <p>Grid 6</p> 
    </div> 
    </div> 
</div> 

सीएसएस:

.grid-container { 
    width: 100%; 
    text-align: center; 
    margin-top: 15px; 
} 

.third { 
    display: inline-table; 
    width: 30%; 
} 

.grid { 
    border: 1px solid black; 
    margin: 10px 0; 
} 

.grid1 { 
    height: 200px; 
} 

.grid2 { 
    height: 100px; 
} 

.grid3 { 
    height: 100px; 
} 

.grid4 { 
    height: 350px; 
} 

.grid5 { 
    height: 200px; 
} 

.grid6 { 
    height: 200px; 
} 

अब मैंने बहुत सारे सीएसएस वर्गों का उपयोग किया है (ग्रिड 1, ग्रिड 2 ...), उन्हें आम तौर पर उपयोग नहीं करना पड़ता है, बस ऊंचाई निर्धारित करें: ऑटो ताकि सभी सामग्री दिखाने के लिए ऊंचाई की आवश्यकता हो।

कार्य उदाहरण यहां पाया जा सकता: http://cssdeck.com/labs/full/nuauntmo

Answer 2

आप क्या हासिल करने की कोशिश कर रहे हैं पर निर्भर करता है, तो आप अलग कंटेनर में खड़ी खड़ी ब्लॉक डाल सकता है। कुछ इस तरह:

HTML:

<div id="content"> 
    <div class="col"> 
     <div class="block" style="height:600px;"> 

     </div> 

     <div class="block" style="height:500px;"> 

     </div> 
    </div> 
    <div class="col"> 
     <div class="block" style="height:500px;"> 

     </div> 

     <div class="block" style="height:500px;"> 

     </div> 
    </div> 
... 

सीएसएस: अगर वहाँ पर्याप्त क्षैतिज स्थान हालांकि नहीं है

.col { 
    display: inline-block; 
    margin-right:80px; 
    vertical-align: top; 
} 
.block { 
    width:350px; 
    background-color:#ccc; 
    border-radius:5px; 
    margin-bottom:80px; 
    display:block; 
    vertical-align: top; 
} 

#content { 
    position:relative; 
    display:inline; 
    overflow:auto; 
} 

कॉलम लपेटो जाएगा, ताकि कंटेनर एक निश्चित चौड़ाई है करना होगा।

Answer 3

सीएसएस में लंबवत-संरेखण संपत्ति जोड़ने का प्रयास करें।

.block 
{ 
    width:350px; 
    background-color:grey; 
    border-radius:5px; 
    margin-right:80px; 
    margin-bottom:80px; 
    display:inline-block; 
    vertical-align: top; 

}