क्षमा करें यदि यह एक डुप्लिकेट है; विशिष्ट डिजाइन प्रश्नों का पता लगाना मुश्किल है...

<div id="sidebar"></div>
<div id="top-expand"></div>
<div id="bottom-expand"></div>

साइडबार की निश्चित चौड़ाई 200px है; अन्य 2 divs प्रत्येक की एक निश्चित ऊंचाई होती है और यह आदर्श होगा यदि मैं उन्हें खिड़की की चौड़ाई के साथ खींच सकता हूं।

 ------------------------------------- 
|       |                             |  
|       |        top-expand           |
|sidebar|-----------------------------|
|       |                             |
|       |       bottom-expand         |
 -------------------------------------

साइडबार: निश्चित चौड़ाई;
शीर्ष-विस्तार: निश्चित ऊंचाई; नीचे-विस्तार: निश्चित ऊंचाई;

क्या यह संभव है कि साइडबार निश्चित चौड़ाई में रहे और इसके बगल में अन्य दो divs को केवल सीएसएस के साथ ढेर कर दें? मैं विंडो गणनाओं को संभालने के लिए jQuery का उपयोग करने के खिलाफ नहीं हूं, लेकिन इस भाग का मूल सीएसएस/एचटीएमएल प्रतिनिधित्व करना अच्छा होगा

आपके सुझावों के लिए धन्यवाद =)

0
sova 3 अगस्त 2011, 06:38

1 उत्तर

हाँ यह संभव है। इसे <div> में position: relative के साथ लपेटें, साइडबार को बिल्कुल सही स्थिति में रखें, और अन्य दो <div> को एक बायां हाशिया दें जो साइडबार की चौड़ाई से मेल खाता हो।

उदाहरण के लिए:

<div id="outer">
    <div id="sidebar">pancakes</div>
    <div id="top-expand"></div>
    <div id="bottom-expand"></div>
</div>

सीएसएस:

#outer {
    position: relative;
}
#sidebar {
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
    background: #00f;
}
#top-expand {
    height: 100px;
    margin-left: 100px; /* Matches the #sidebar width */
    background: #0f0;
}
#bottom-expand {
    height: 100px;
    margin-left: 100px; /* Matches the #sidebar width */
    background: #f00;
}

लाइव उदाहरण: http://jsfiddle.net/ambiguous/kRs54/1/

मैं jsfiddle परिणाम क्षेत्र में अच्छी तरह फिट होने के लिए ब्लॉक और छोटे आकार में अंतर करने के लिए पृष्ठभूमि रंगों का उपयोग कर रहा हूं।

ब्लॉक तत्व, जैसे कि <div>, सभी उपलब्ध चौड़ाई को उनके मार्जिन से कम करते हैं, जब तक कि आप अन्यथा निर्दिष्ट नहीं करते हैं, इसलिए आप अपने #top-expand और #bottom-expand तत्वों को एक साथ रहने के लिए पर्याप्त पर्याप्त बायां मार्जिन देते हैं #sidebar. जब वे साइडबार से लम्बे होते हैं तो बायाँ हाशिया भी दाईं ओर के ब्लॉक को सही जगह पर रखता है।

1
mu is too short 3 अगस्त 2011, 06:50
समझा! आपकी व्याख्या के लिए धन्यवाद =)
 – 
sova
3 अगस्त 2011, 23:33
@ सोवा: फ़्लोट किए गए तत्व भी काम करेंगे। मैं केवल फ़्लोटिंग का उपयोग करता हूं जब मैं चाहता हूं कि चीजें फ़्लोट किए गए तत्व के चारों ओर बहती रहें, हालांकि ज्यादातर व्यक्तिगत वरीयता का मामला है।
 – 
mu is too short
3 अगस्त 2011, 23:50