थोड़ा कचरा शीर्षक के लिए खेद है। मैं नहीं सोच सकता कि इसे बेहतर तरीके से कैसे वर्णन किया जाए।सीएसएस सेट चौड़ाई शेष क्षेत्र के% को भरने के लिए

मैं लागू करने के लिए गूगल फ्रेंड कनेक्ट सदस्यों मेरी साइट, पर गैजेट (सिर्फ योजना में मिला है और कम से कम परीक्षण के लिए एक प्रमुख को नया स्वरूप के बिना इसे में डाल करने के लिए, चाहते हैं) कोशिश कर रहा हूँ।

मैं एक कंटेनर div मुख्य पृष्ठ (शरीर) का 90% की चौड़ाई है कि है:

मेरे समस्या इस प्रकार है। इसके अंदर मैं दाईं ओर एक div तैर रहा हूं और इसकी चौड़ाई 300px पर रख रहा हूं और Google गैजेट को इसके अंदर रख रहा हूं। मैं क्या चाहता हूं कि Google गैजेट div के बाईं ओर शेष स्थान का 95% भाग भरने में सक्षम होना है।

अगर यह संभव है divs और चौड़ाई के साथ पिक्सल और% मिश्रण करने में सक्षम हो मैं नहीं जानता।

मुझे उम्मीद है कि यह समझ में आता है।

धन्यवाद

स्रोत

2008-12-05 Jon

संबंधित http://stackoverflow.com/questions/4873832/make-a-div-fill-up-the-remaining-width –

यह है। आप अर्द्ध तरल लेआउट की तलाश में हैं। खोज मूल रूप से holy grail of CSS implementation थी ... लेकिन जैसा कि आप उस लिंक से देख सकते हैं (वे 3 कॉलम कर रहे हैं, 2 फिक्स्ड लेकिन इसे बदलने में आसान है), यह एक समस्या हल हो गई है =)

स्रोत

2008-12-05 09:34:41 Oli

सही लग रहा है। धन्यवाद। सप्ताहांत में मुझे इसके साथ एक झगड़ा होगा। – Jon

+44

यह इस तरह के लेख हैं जो मेरे डर की पुष्टि करते हैं कि सीएसएस दूर लेआउट के लिए एक अच्छे उपकरण से बहुत दूर है। – s4y

+11

@ सिडनीशस कोई ऐसा व्यक्ति जो मेरे [रोटी और मक्खन के काम के रूप में] वेबसाइटों में कनवर्ट करना] करता है, मैं आपको बता सकता हूं कि यह किसी और चीज से कहीं बेहतर है जो पहले या सुझाव दिया गया है। यह सही नहीं है और आपको यह जानने की जरूरत है कि यह कैसे काम करता है ... लेकिन एक बार ऐसा करने के बाद, यह आसान है। – Oli

मैंने जल्दी किया पूरे स्थान पर कई संभावित समाधानों को देखने के बाद भी प्रयोग करें। मैं जो करने की कोशिश कर रहा था वह तरल पदार्थ और निश्चित पंक्तियों और स्तंभों का मिश्रण था।

http://jsbin.com/hapelawake

स्रोत

2015-01-05 04:37:59

-2

आप एक एल्गोरिथ्म jQuery या जे एस जो शेष अंतरिक्ष के लिए जाँच करता है और गतिशील रूप से "शेष" तत्व की चौड़ाई सेट का उपयोग कर बनाने की जरूरत के अनुसार:

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

हमने तरल-प्रतिक्रियाशील-ग्रिड आधारित मीडिया सिस्टम के निर्माण के दौरान समान मुद्दों का अनुभव किया है।

स्रोत

2015-05-09 18:31:30 BasisInteractive

flexbox समाधान

.main { 
 
    display: flex; 
 
    width: 90%; 
 
} 
 
.col1 { 
 
    flex-grow: 1; 
 
} 
 
.col2 { 
 
    width: 300px; 
 
    margin-left: 5%; 
 
}

<div class="main"> 
 
    <div class="col1" style="background: #eee;">Left column</div> 
 
    <div class="col2" style="background: #ccc;">Right column</div> 
 
</div>

नोट: फ्लेक्स विक्रेता उपसर्गों जोड़े यदि आपके supported browsers के लिए आवश्यक।

स्रोत

2017-07-26 20:12:29

सीएसएस सेट चौड़ाई शेष क्षेत्र के% को भरने के लिए

उत्तर

flexbox समाधान

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