divs की कई पंक्तियां बनाएं

Question

मैं 2 div2 सेटअप बनाना चाहता हूं, जिसमें 4 div तत्व शामिल हैं। मेरे प्रदर्शन के लिए inline-block का उपयोग करके अब तक मेरे परीक्षण के लिए मेरे fiddle देखें। मैं क्रमशः 1 और 2 के नीचे "div 3" और "div 4" रखना चाहता हूं। क्या तैरने के बिना ऐसा करने का कोई तरीका है?

HTML:

<div class = "blocks"> 
    div 1 
</div> 

<div class = "blocks"> 
    div 2 
</div> 

<div class = "blocks"> 
    div 3 
</div> 

<div class = "blocks"> 
    div 4 
</div> 

सीएसएस:

.blocks { 
    display: inline-block; 
    border: solid 1px red; 
    width: 100px; 
} 

Answer 1

एक कंटेनर div में ब्लॉक रखो, और यह एक निश्चित चौड़ाई दे।

.wrap{ 
    width:210px; 
} 

<div class='wrap'> 
    <div class = "blocks">div 1</div> 
    <div class = "blocks">div 2</div> 
    <div class = "blocks">div 3</div> 
    <div class = "blocks">div 4</div> 
</div> 

Fiddle

Answer 2

http://jsfiddle.net/QXqEG/7/

इस तरह?

<div style="width: 210px;"> 
    <div class = "blocks"> 
    div 1 
</div> 

<div class = "blocks"> 
    div 2 
</div> 

<div class = "blocks"> 
    div 3 
</div> 

<div class = "blocks"> 
    div 4 
</div> 
</div> 

Answer 3

मान लें कि आपके divs निश्चित चौड़ाई हैं। बस उन्हें एक तत्व में लपेटें, फिर उस तत्व की चौड़ाई को सीमित करें ताकि केवल दो ही एक पंक्ति पर फिट हो सकें। इसे आसानी से 3 चौड़ाईवार, या 4 चौड़ाई के अनुसार फिट करने के लिए संशोधित किया जा सकता है या जो भी आप उस मामले के लिए चुनते हैं।

यहां एक जेएसएफडल है जो मानता है कि आपके बक्से 100PX चौड़े हैं।

http://jsfiddle.net/QXqEG/4/

सीएसएस:

.container { width: 210px; } 

HTML:

<div class="container"> 
<div class = "blocks"> 
    div 1 
</div> 

<div class = "blocks"> 
    div 2 
</div> 

<div class = "blocks"> 
    div 3 
</div> 

<div class = "blocks"> 
    div 4 
</div> 
</div><!-- end container --> 

Answer 4

आप एक <div> कि 2x2 divs आप चाहते हैं में शामिल होंगे बना सकते हैं।

इस तरह

:

एचटीएमएल

<div id="column"> 
    <div class = "blocks"> 
    div 1 
    </div> 

    <div class = "blocks"> 
    div 2 
    </div> 

    <div class = "blocks"> 
    div 3 
    </div> 

    <div class = "blocks"> 
    div 4 
    </div> 
</div> 

सीएसएस

#column { 
    position: absolute; 
    width: 210px; height: 100%; 
    border: 1px solid #000 
} 

देखते हैं कि यह jsFiddle

Answer 5

लपेट ब्लॉकों है कि आप टी में चाहते हैं वह एक div के साथ एक ही पंक्ति और शायद उनकी चौड़ाई

<div class="row"> 
    <div class = "blocks"> 
    div 1 
    </div> 

    <div class = "blocks"> 
    div 2 
    </div> 
</div> 

<div class="row"> 
    <div class = "blocks"> 
    div 3 
    </div> 

    <div class = "blocks"> 
    div 4 
    </div> 
</div> 

Answer 6

ऐसा करने के कई तरीके हैं। एक तरीका यह है कि div 2 और div 3 के बीच <br /> टैग को विज्ञापन करना होगा, दूसरा एक नया <div> में नीचे की तरह प्रत्येक पंक्ति को घोंसला करना होगा। यह वास्तव में निर्भर करता है कि आप क्या करने की योजना बना रहे हैं।

<div id= "row1"> 
    <div class = "blocks"> 
     div 1 
    </div> 

    <div class = "blocks"> 
     div 2 
    </div> 
</div> 

<div id= "row2"> 
    <div class = "blocks"> 
     div 3 
    </div> 

    <div class = "blocks"> 
     div 4 
    </div> 
</div>