2010-02-09 18 views
55

मुझे यकीन है कि इस समस्या से पहले पूछा गया है लेकिन मुझे जवाब नहीं मिल रहा है।माता-पिता को भरने के लिए सीएसएस चौड़ाई कैसे बनाएं?

मैं निम्न मार्कअप है:

<div id="foo"> 
    <div id="bar"> 
     here be dragons 
    </div> 
</div> 

मेरे इच्छा foo 600px (width: 600px;) की चौड़ाई के लिए और बार है निम्न व्यवहार बनाने के लिए बनाने के लिए है:

padding-left: 2px; 
padding-right: 2px; 
margin-left: 2px; 
margin-right: 2px; 
outerWidth: 100%; 

दूसरे शब्दों में बार की चौड़ाई को 592px पर सेट करने के बजाय मैं बार की बाहरी चौड़ाई 100% पर सेट करना चाहता हूं ताकि यह 592px पर गणना की जा सके। यहां महत्व यह है कि मैं foo की चौड़ाई को 800px में बदल सकता हूं और बार इन गणनाओं के बजाय मैन्युअल रूप से गणित करने के बजाय बार की गणना करेगा।

क्या यह शुद्ध सीएसएस में संभव है?

इसके साथ कुछ और भी मजेदार:

  • क्या #bar यदि एक मेज है?
  • क्या होगा अगर #bar एक टेक्स्टरेरा है?
  • क्या होगा अगर #bar एक इनपुट है?

  • क्या होगा यदि #foo एक तालिका कक्ष (td) है? (इस परिवर्तन समस्या है या समस्या समान है?)


अब तक table#bar, input#bar चर्चा की गई। मैंने textarea # बार के लिए एक अच्छा समाधान नहीं देखा है। मुझे लगता है कि div रैप के साथ कोई सीमा/मार्जिन/पैडिंग वाला टेक्स्टरिया div के साथ textarea के लिए सीमाओं के रूप में काम करने के लिए स्टाइल हो सकता है।

उत्तर

31

संपादित:

खैर उन तीन अलग-अलग तत्वों में सभी अलग-अलग नियमों के नियम हैं।

तो के लिए:

table#bar आप 100% की चौड़ाई निर्धारित करने की आवश्यकता नहीं तो यह होगा के रूप में यह निर्धारित करता है कि यह होने की जरूरत है केवल के रूप में व्यापक हो सकता है। हालांकि, यदि टेबल पंक्तियों की कुल चौड़ाई bar की चौड़ाई से अधिक है तो यह इसकी आवश्यक चौड़ाई तक विस्तारित होगी। अगर मुझे याद है कि आप इसे display: block !important; सेट करके इसका सामना कर सकते हैं, हालांकि कुछ समय बाद आईव को इसे ठीक करना पड़ा था। (मुझे यकीन है कि अगर कोई गलत है तो कोई मुझे सही करेगा)।

textarea#bar i beleive ब्लॉक स्तर तत्व है, इसलिए यह div के समान नियमों का पालन करेगा।यहां केवल एक चेतावनी है कि textareacols और rows के गुणों को लेते हैं जिन्हें वर्ण कॉलम में मापा जाता है। यदि यह तत्व पर निर्दिष्ट है तो यह सीएसएस द्वारा निर्दिष्ट चौड़ाई को ओवरराइड करेगा।

input#bar एक इनलाइन तत्व है, इसलिए डिफ़ॉल्ट रूप से आप इसे चौड़ाई निर्दिष्ट नहीं कर सकते हैं। हालांकि textarea के cols विशेषता के समान, यह तत्व पर size विशेषता है जो चौड़ाई निर्धारित कर सकता है। उस ने कहा, आप इसके लिए अपने सीएसएस में display: block; का उपयोग कर चौड़ाई निर्दिष्ट कर सकते हैं। फिर यह div के समान प्रतिपादन नियमों का पालन करेगा।

td#foo को table-cell के रूप में प्रस्तुत किया जाएगा जिसमें इसके लिए कुछ पागलपन है। यहां नीचे की रेखा यह है कि आपके उद्देश्यों के लिए यह div#foo की तरह कार्य करने जा रहा है, जहां तक ​​इसकी सामग्री की चौड़ाई सीमित है। यहां एकमात्र मुद्दा कहीं भी कॉलम में संभावित अवांछित पाठ होने जा रहा है जो इसे आपकी चौड़ाई सेटिंग को अनदेखा कर देगा। कॉलम में सभी कोशिकाओं को व्यापक सेल की चौड़ाई प्राप्त करने जा रहे हैं।


ब्लॉक स्तर तत्व का डिफ़ॉल्ट व्यवहार - यानी। यदि चौड़ाई auto (डिफ़ॉल्ट) है तो यह युक्त तत्व की आंतरिक चौड़ाई का 100% होगा। तो संक्षेप में:

#foo {width: 800px;} 
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;} 

आपको वही देगा जो आप चाहते हैं।

+0

अरे, धन्यवाद। वैसे भी खून बहने का निर्णय ले रहे टेबल के साथ मज़ा भी है। मुझे लगता है कि टेबल में divs के समान व्यवहार है? –

+0

@ डिमिट्री: नहीं, उनके पास विशेष नियम हैं जो उन्हें 'ब्लॉक' तत्वों की तुलना में 'इनलाइन-ब्लॉक' की तरह प्रस्तुत करते हैं। ध्यान दें कि मैंने कहा ** ** ** की तरह ** ** ** जैसा ही ** :-) आप जो अनुभव कर रहे हैं वह यह है कि जब तक कि अन्यथा परिभाषित नहीं किया जाता है, वे आम तौर पर उन सभी कॉलम को समायोजित करने के लिए विस्तारित होते हैं जो वास्तव में परेशान हो सकते हैं यदि कुछ शीर्षलेख/कोशिकाओं में उनमें लंबे समय तक अवांछित पाठ है। – prodigitalson

+0

मदद करने के लिए धन्यवाद :) समस्याओं का एक और अधिक संपूर्ण अवलोकन देने के लिए मुझे थोड़ा सा सवाल अपडेट करने दें और उम्मीद है कि सभी कामकाज एक सेक्शन में सूचीबद्ध किए जा सकते हैं। –

20
लगभग वहाँ

, बस outerWidth: 100%;width: auto; को (outerWidth एक सीएसएस संपत्ति नहीं है) वैकल्पिक रूप से बदल

, बार के लिए निम्न शैलियाँ लागू:

width: auto; 
display: block; 
+4

वह काम नहीं करेगा अगर वह 'बार' पर मार्जिन पैडिंग सेट कर रहा है क्योंकि इसे 100% प्रभावी ढंग से 'बार' को अपने माता-पिता 'foo' से अधिक व्यापक रूप से जोड़ा जाएगा। – prodigitalson

+0

हाँ, मैंने उत्तर दिया कि एक बहुत तेज; पी – Rowan

+0

एक सेकंड प्रतीक्षा करें। तो अगर मैं चौड़ाई की संपत्ति को किसी भी चीज़ पर सेट करता हूं, तो यह खून बह जाएगा? चौड़ाई: ऑटो समाधान नहीं है, बल्कि चौड़ाई निर्धारित नहीं है? –

1

तो अनुसंधान के बाद निम्नलिखित की खोज की है:

एक div#bardisplay:block; width: auto; स्थापित करने के लिए एक table#bar आप नीचे वर्णित नियमों के साथ एक div में लपेट की जरूरत के लिए outerWidth:100%;

के बराबर होती है। तो अपने संरचना हो जाता है:

<div id="foo"> 
<div id="barWrap" style="border...."> 
    <table id="bar" style="width: 100%; border: 0; padding: 0; margin: 0;"> 

इस तरह की मेज 100% माता पिता div तक ले जाता है, और #barWrap#bar तालिका करने के लिए सीमाओं/मार्जिन/padding जोड़ने के लिए प्रयोग किया जाता है। ध्यान दें कि आपको #barWrap में पूरी चीज़ की पृष्ठभूमि सेट करने की आवश्यकता होगी और #bar की पृष्ठभूमि पारदर्शी हो या #barWrap के समान हो।

textarea#bar और input#bar के लिए आप table#bar के रूप में एक ही बात करने की जरूरत है, नीचे की ओर है कि सीमाओं को हटाने के द्वारा आप इनपुट/पाठ क्षेत्र के मूल विजेट प्रतिपादन और #barWrap की सीमाओं को रोकने के लिए सब कुछ से कुछ अलग दिखने जाएगा अन्यथा, तो आपको शायद इस तरह अपने सभी इनपुट स्टाइल करना होगा।

5

उपयोग शैलियों

left: 0px; 

या/और

right: 0px; 

या/और

top: 0px; 

या/और

bottom: 0px; 

मुझे लगता है कि ज्यादातर मामलों के लिए

+0

यह सबसे अच्छा जवाब है –

+0

आप एक नायक हैं। मैंने आज कुछ नया सीखा। धन्यवाद! – Gogol

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