दो कॉलम पर चर ऊंचाई के साथ सीएसएस स्टैकिंग div

तो मैं अपनी वेबसाइट पर किसी उपयोगकर्ता का प्रोफाइल पेज काम कर रहा हूं। और मुझे सीएसएस के साथ एक छोटी सी समस्या है।दो कॉलम पर चर ऊंचाई के साथ सीएसएस स्टैकिंग div

मेरी समस्या निम्न है: मेरे पास चार डिवी बॉक्स हैं जो एक निश्चित चौड़ाई के साथ हैं लेकिन चरम ऊंचाई के साथ हैं और मैं उन्हें एक दूसरे के शीर्ष पर ढेर करना चाहता हूं।

तस्वीर भाई मेरे मुद्दे का एक स्क्रीनशॉट है, "नवीनतम वीडियो" शीर्षक वाले div को "मूलभूत जानकारी" शीर्षक के साथ चिपकाया जाना चाहिए। "संपर्क जानकारी" और "नवीनतम तस्वीर" की तरह हैं।

<div style="margin-left:-10px"> 
    <div class="infoBox" style="width:360px; margin-left:9px"> 
     Content goes here for basic info 
    </div> 
    <div class="infoBox" style="width:360px; margin-left:9px"> 
     Content goes here for contact info 
    </div> 
    <div class="infoBox" style="width:360px; margin-left:9px"> 
     Content goes here for latest photos 
    </div> 
    <div class="infoBox" style="width:360px; margin-left:9px"> 
     Content goes here for latest videos 
    </div> 
</div>

जानकारी बॉक्स के लिए CSS वर्ग इस तरह दिखता है:

.infoBox { 
    width: 100%; 
    margin: -1px; 
    background-color:#37312d; 
    padding:5px; 
    border:#5b504a solid 1px; 
    margin-bottom:9px; 
    float:left; 
}

मैं इस काम करने के लिए क्या कर सकते हैं

My problem

मेरे एचटीएमएल कुछ इस तरह लग रहा है?

स्रोत

2012-09-10 Joris Blanc

आप उन्हें सभी बाएं तैर रहे हैं, मैं कल्पना करता हूं कि दो दाएं तरफ तैर रहे हैं और दो बाएं आप जो खोज रहे हैं उसे प्राप्त करेंगे, या क्या मुझे कुछ याद आ रहा है? –

मुझे लगता है कि यहां कुछ बंद है। मैंने [एक बेवकूफ] बनाया [http://jsfiddle.net/7pm67/1/) जिसमें मैंने कंटेनर '760px' चौड़ा बनाया, और सबकुछ ऊपर की ओर। क्या यहां सीएसएस के लिए कुछ और है? शायद सामग्री के साथ कोई समस्या है? – Eric

यह प्रश्न उपयोगी हो सकता है http://stackoverflow.com/questions/10302056/workign-with-floating-li-elements-in-footer/10303004#10303004 – Paradise

nesting your divs in columns की कमी:

<div class="left-column"> 
    <div class="infoBox">...</div> 
    <div class="infoBox">...</div> 
</div> 
<div class="right-column"> 
    <div class="infoBox">...</div> 
    <div class="infoBox">...</div> 
</div>

आप jQuery Masonry की कोशिश कर सकते। Here's a fiddle इसका उपयोग प्रदर्शित करता है।

स्रोत

2012-09-10 18:53:03 crowjonah

ग्रेट लिंक, और मुझे लगता है कि यह जोरीस जो चाहता है वह अधिक स्पष्ट रूप से देगा। +1 – KRyan

मैं इसे देखने जा रहा हूं, भले ही मैं ऐसे समाधान को पसंद करूंगा जिसमें जावास्क्रिप्ट शामिल न हो। धन्यवाद –

इस पृष्ठ पर बहुत सारे सीएसएस समाधान हैं! [यहां एक और पहेली है] (http://jsfiddle.net/crowjonah/pWvsh/) नेस्टेड divs का उपयोग कॉलम के रूप में करते हैं। – crowjonah

आप इस कोड

#bottom{ 
    width: ???px; 
    height: ???px; 
    background-color: black; 
} 
#top{ 
    width:???px; 
    height:???px; 
    background-color:red; 
    z-index: 999; 
} 


<div id="bottom"> 
    <div>......</div> 
    <div id="top">......</div> 
</div>

स्रोत

2012-09-10 18:56:07

साथ कोशिश कर सकते हैं आप स्तंभ like so में बक्से डाल सकते हैं। यह एक बहुत ही बुनियादी ग्रिड सिस्टम है, लेकिन यह मूल विचार दिखाता है: आप अपने बक्से को रैपर divs के अंदर ढेर कर रहे हैं जो स्तंभ बनाते हैं।

यदि आप अपनी साइट पर इस पैटर्न को दोहराएंगे, तो आप अधिक औपचारिक ग्रिड सिस्टम का उपयोग करना चाह सकते हैं। "सीएसएस ग्रिड सिस्टम" खोजकर कई उदाहरण मिल सकते हैं।

स्रोत

2012-09-10 18:57:09 tuff

मेरा सुझाव है कि आप दो कॉलम में सामग्री विभाजित:

HTML:

<div style="margin-left:-10px"> 
    <div class="column"> 
     <div class="infoBox" style="width:360px; margin-left:9px"> 
      Content goes here for basic info 
     </div> 
     <div class="infoBox" style="width:360px; margin-left:9px"> 
      Content goes here for latest videos 
     </div> 
    </div> 
    <div class="column"> 
     <div class="infoBox" style="width:360px; margin-left:9px"> 
      Content goes here for contact info 
     </div> 
     <div class="infoBox" style="width:360px; margin-left:9px"> 
      Content goes here for latest photos 
     </div> 
    </div> 
</div>

और अपने सीएसएस ऐड में:

.column{float:left; width:50%;}

अद्यतन: कॉलम डॉन 'के अंदर बक्से टी को फ़्लोट करने की आवश्यकता है यदि आप इस समाधान का उपयोग करते हैं

स्रोत

2012-09-10 18:59:47

एकमात्र परिवर्तन जो मैं करूँगा वह 'कॉलम' को एक वर्ग बनाना होगा, न कि आईडी, क्योंकि आप इसे कई तत्वों के बीच साझा करना चाहते हैं। – mclark1129

धन्यवाद @ माइक, मैंने बस तय किया कि –

यह काम कर सकता है, मैं इसे आजमाऊंगा और इसे व्यावहारिक समाधान के जरिए देख सकता हूं। :) –

इस के लिए मैंने जो सबसे अच्छा समाधान पाया है, एसएसयू प्रत्येक पोस्ट को कक्षा .odd और .even या .left और टैग के साथ टैग करना है। फिर बस अजीब/बाएं पोस्ट को छोड़ दें और दाएं/दाएं पोस्टों को सही करें। ध्यान दें कि यह केवल दृश्यता से काम करता है यदि पदों की चौड़ाई उनके कंटेनर की चौड़ाई तक बढ़ जाती है। फिर विभिन्न प्रकार के स्क्रीन आकारों पर यह काम करने के लिए दोहरी कॉलम कंटेनर की चौड़ाई की तुलना में छोटी स्क्रीन पर छोड़े जाने के लिए/दाएं पोस्ट पर फ्लोट को बदलने के लिए बस @media क्वेरी जोड़ें।

स्रोत

2014-03-19 00:36:37 hyphnKnight

लगता है जैसे आपके पास कुछ कोड है जिसे आप साझा कर सकते हैं? –

दो कॉलम पर चर ऊंचाई के साथ सीएसएस स्टैकिंग div

उत्तर

संबंधित मुद्दे