दिलचस्प पोस्ट
XML डेटा पढ़ने के दौरान अधिकतम स्ट्रिंग सामग्री की लंबाई कोटा (8192) पार कर ली गई है पांडा डेटाफ़्रेम में चयनित सेल के लिए मान सेट करें बैकरेन्फ़िकेशन इन लेकबीहैंड हो सकता है कि एक से वापसी पर ऑपरेटिंग जिसमें "बस" क्या मैं विजुअल स्टूडियो 2010 के सी ++ कंपाइलर का उपयोग विज़ुअल स्टूडियो 2008 के सी ++ रनटाइम लाइब्रेरी के साथ कर सकता हूं? क्या बिटमैपसोर्स और बिटमैप के बीच कन्वर्ट करने का एक अच्छा तरीका है? वर्तमान गतिविधि का एक स्क्रीनशॉट कैसे लें और फिर इसे साझा करें? एंड्रॉइड ग्रेडले बिल्ड त्रुटि: (9, 0) ग्रैडल डीएसएल विधि नहीं मिली: 'कंपाइल ()' jQuery – सबमिट करने के लिए अतिरिक्त मापदंडों को जोड़ें (नहीं अजाक्स) एक विधि को किसी अन्य रूप से कॉल करें रेल 3 में ग्लोबल वैरिएबल कहां रखा जाए AngularJS में कीप्रेस इवेंट का उपयोग कैसे करें? क्यों सी + कंटेनरों अधूरा प्रकार की अनुमति नहीं देते? स्कैनर बनाम स्ट्रिंगटोकनाइज़र बनाम स्ट्रिंग। स्प्लिट PHP में क्रेडिट कार्ड को मान्य करने का सबसे अच्छा तरीका क्या है?

एक्सएचटीएमएल / सीएसएस: आंतरिक डिवाइंड को 100% चौड़ाई घटाकर दूसरे डिवा चौड़ाई कैसे बनाया जाए

मेरे बाहरी डिब्बे में 2 नेस्टेड डिवाएं हैं, जिसकी चौड़ाई है: 100% दोनों नेस्टेड डिवाओं को एक पंक्ति में होना चाहिए और पहले इसे इसके सामग्रियों से आकार देना चाहिए:

<div id="#outer" style="width:100%; border:1px"> <div id="#inner1" style="border:1px; display:inline"> inner div 1. Some text... </div> <div id="#inner2" style="width:100%????; border:1px; display:inline"> inner div 2... </div> </div> 

सवाल है कि # आंतरिक 2 डिव को बाकी क्षैतिज स्थान प्राप्त करने के लिए कैसे करें यदि # आंतरिक 1 div की चौड़ाई निर्दिष्ट नहीं की गई है और यह अंदर क्या है पर निर्भर करती है?

पीएस सभी शैलियों मेरे मामले में अलग-अलग वर्गों में हैं, यहां मैंने सरलीकरण के लिए शैली विशेषताओं में सीएसएस को लगाया है।

मुझे IE7 + और FF 3.6 में काम करना चाहिए

मेरे लिए और अधिक विवरण में ऐसा लगता है:

  <style type="text/css"> .captionText { float:left; } .captionLine { height: 1px; background-color:black; margin: 0px; margin-left: 5px; margin-top: 5px; border: 0px; padding: 0px; padding-top: 1px; } </style> <table style="width:300px;"> <caption width="100%"> <div class="captionText">Some text</div> <div class="captionLine"> </div> </caption> <tr> <td>something</td> </tr> </table> 

मैं क्या चाहता हूं की छवि यहां दी गई है: मैं क्या चाहता हूं की छवि

वेब के समाधान से एकत्रित समाधान "एक्सएचटीएमएल / सीएसएस: आंतरिक डिवाइंड को 100% चौड़ाई घटाकर दूसरे डिवा चौड़ाई कैसे बनाया जाए"

रहस्यमय overflow: hidden; आपका मित्र यहां है यह फ़्लोट के पीछे स्थित फ्लोटों के आस-पास के तत्वों को रोकता है – मुझे लगता है कि वह लेआउट है जिसे आप ढूंढ रहे हैं।

यहां कुछ थोड़ा एचटीएमएल संपादित किया गया है: मुझे नहीं लगता कि आपके id में आपके # अक्षर हो सकते हैं:

 <div id="outer"> <div id="inner1"> inner div 1. Some text... </div> <div id="inner2"> inner div 2... </div> </div> 

और यहां सीएसएस आपको इच्छित लेआउट प्राप्त करने के लिए है।

(मैं HTML 6 में सशर्त टिप्पणियों के साथ आईई 6 के लिए अतिरिक्त सीएसएस में डाल दिया। मैंने देखा है कि वास्तव में आईई 6 में भी काम करने की जरूरत नहीं है, लेकिन अगर आप IE 6 उपयोगकर्ताओं के लिए अच्छा लगा रहे हैं …)

 <style type="text/css"> #outer { overflow: hidden;/* Makes #outer contain its floated children */ width: 100%; /* Colours and borders for illustration purposes */ border: solid 3px #666; background: #ddd; } #inner1 { float: left;/* Make this div as wide as its contents */ /* Colours and borders for illustration purposes */ border: solid 3px #c00; background: #fdd; } #inner2 { overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */ /* Colours and borders for illustration purposes */ border: solid 3px #00c; background: #ddf; } </style> <!--[if lte IE 6]> <style type="text/css"> #inner2 { zoom: 1;/* Make this div take up the rest of the horizontal space, and no more, in IE 6 */ } #inner1 { margin-right: -3px;/* Fix the 3-pixel gap that the previous rule introduces. (Shit like this is why web developers hate IE 6.) */ } </style> <![endif]--> 

6, 7 और 8 में परीक्षण और काम करना; फ़ायरफ़ॉक्स 3.5; और क्रोम 4

यदि आप इसे पढ़ रहे हैं तो आप संभवतः calc उपयोग कर सकते हैं, इसलिए आभारी रहें

एचटीएमएल

 <div class="universe"> <div class="somewidth"> </div> <div class="everythingelse"> </div> </div> 

सीएसएस

 .universe { width: 100%; height: 100%; } .somewidth { width: 200px; height: 100%; } .everythingelse { width: 800px; /* fallback for emergencies */ width: calc(100% - 200px); width: -moz-calc(100% - 200px); width: -webkit-calc(100% - 200px); height: 100%; } 

JSFiddle पर काम उदाहरण देखें

आपको बाईं तरफ के भीतर 1 डिवा को फ्लोट करने की आवश्यकता होगी, जैसे:

 <div id="#outer" ....> <div id='#inner1" style="float:left; border: 1px solid #000;"> blabla </div> <div id="#inner2" style="... DON'T USE WIDTH AND DISPLAY HERE! ..."> gnihihi </div> </div> 

यह काम कर जाना चाहिए। इसकी जांच – पड़ताल करें! अलविदा

आपको नेस्टेड तत्व के लिए div का उपयोग करने की आवश्यकता नहीं है, बस इस तरह से SPAN का उपयोग करें

  <div> <span style="display:inline-block;width: auto;border: solid 1px black;"> hey you </span> <span style="display:inline-block;marging: 0px 2px;border: solid 1px black;"> always use proper tools. </span> </div> 

@ नासर हजलू के जवाब पर विस्तार, यह मेरे लिए काम करता है (आईई 6 में भी)

  <div style="width: 400px; border: solid 1px red;"> <span style="float:left;width: auto;border: solid 1px black;"> hey you </span> <div style="display:inline-block;margin: 0px 2px;border: solid 1px black;">always use proper tools.</div> </div> 

400px की तुलना में मुख्य डिवीजन के साथ यह देखने के लिए कि यह कैसे समायोजित करता है। (यह स्पेस के बजाय डिविज़ के साथ काम करता है – कुंजी चौड़ाई है: पहले डिवि / स्पैन में ऑटो ।)

इसे आज़माएं: inner1 अंदरूनी अंदर inner2 , और display:inline हटा दें display:inline inner2 display:inline से, इस तरह से:

 <div id="#outer" style="width:100%; border:1px solid red"> <div id="#inner2" style="width:100%; border:1px solid black;"> <div id="#inner1" style="border:1px solid blue; display:inline"> inner div 1. Some text... </div> inner div 2... </div> </div> 

आप इसे यहां काम कर देख सकते हैं: http://jsbin.com/adiwi

आपके कोड से ऐसा लगता है कि आप अपने डिव में रिक्त स्थान को भरने के लिए एक क्षैतिज रेखा प्राप्त करने का प्रयास कर रहे हैं। अगर मैं सही तरीके से मार्कअप के साथ एक दृश्य प्रभाव बनाने की कोशिश कर रहा हूँ यदि मैं गलत हूं तो मुझे सही करों।

(क्या आप चाहते हैं की एक छवि देखने के लिए अच्छा होगा)

उदाहरण:

 Title --------------------------- or Title: Caption ------------------ 

यह सबसे अच्छा अभ्यास नहीं है आपको सीएसएस के साथ यह प्रभाव प्राप्त करने का प्रयास करना चाहिए।

पहले अपना कोड अधिक शब्दार्थ बनाने का प्रयास करें:

 <div id="#outer" style="width:100%; border:1px"> <h3 style="border:1px; display:inline"> Caption </h3> </div> 

लाइन प्राप्त करने के लिए:

  1. आप चाहते रंग के साथ एक छवि बनाएँ
  2. इसकी ऊँचाई उसी बनाओ जो आप लाइन को पीएक्स में रखना चाहते हैं
  3. इसे background संपत्ति के साथ स्थित करें

 #outer h3 { display: inline; background-color: #000; color: #FFF; } #outer { width: 100%; /* is the default of block element but just for celerity */ background: #000 url('image path') center left; /* position the image */ } 

आपकी पहली समस्या यह है कि आप अपने आईडी को '#' के साथ प्रीफ़िक्स कर रहे हैं। # का उपयोग केवल उस आईडी के साथ तत्व को संदर्भित करने के लिए किया जाता है, उदाहरण के लिए सीएसएस नियम #वाटर {width: 100%} आपके तत्व को संदर्भित करता है:

 <div id="outer"></div> 

इसके अलावा आपको डिवा (या अन्य ब्लॉक तत्वों) पर चौड़ाई का उपयोग करने की आवश्यकता नहीं है जो चल नहीं रहे हैं, क्योंकि वे पहले से ही स्वचालित रूप से 100% उपलब्ध चौड़ाई लेते हैं।

यदि आप 2 डीआईवी को एक ही पंक्ति में दिखाना चाहते हैं तो आपको बाईं ओर पहले वाला फ्लोट करना होगा। आसन्न डीआईवी तब तरफ दिखाई देगी, फिर आपको दूसरे तत्व के लिए चौड़ाई निर्दिष्ट करने की आवश्यकता नहीं है। यहां प्रत्येक div के लिए एक अलग रंगीन सीमा सहित आपका पूरा उदाहरण है

मैंने सीमाओं को बड़ा बना दिया है ताकि आप स्पष्ट हो सकें कि क्या चल रहा है।

 <html><body> <style type="text/css"> #outer { border: solid 5px #c00; } #inner1 { border: solid 5px #0c0; float: left; width: 200px; height: 300px; } #inner2 { border: solid 5px #00c; height: 300px; margin-left: 210px; /* 200px left width + 2 x 5px borders */ } </style> <div id="outer"> <div id="inner1"> inner div 1. Some text... </div> <div id="inner2"> inner div 2... </div> </div> </body></html> 

एक अन्य समाधान एक जावास्क्रिप्ट को चलाने के लिए है जो कैप्शन लाइन क्लास का आकार बदलता है जब दस्तावेज़ इस तरह लोड होता है।
आईई 8 के तहत काम करने के लिए कुछ समय लिया, उसने आईई 7 की कोशिश नहीं की लेकिन काम करना चाहिए।
नोट करने के लिए 2 चीजें

  1. IE getElementsByClassName का समर्थन नहीं करता है, इसके लिए इस फ़ंक्शन को फिर से लिखा गया है।
  2. IE मार्जिन अलग ढंग से संभालता है जब वस्तुओं का आकार बदल जाता है और शैली के साथ स्थानांतरित होता है। मार्जिन लेट, किसी भी तरह से IE क्लास घोषणापत्र में मार्जिन रखता है और इसे नई शैली में जोड़ता है। मार्जिन
 <body onload="resizeCaptionLine()"> <style> caption { border: 1px solid blue; padding: 0px; } .captionText { border: 1px solid red; float: left; } .captionLine { background-color:black; margin: 0px; margin: 5px 0px 0px 5px; border: 0px; padding: 0px; padding-top: 1px; } </style> <table style="width:300px;"> <caption width="100%" name="caption1"> <div class="captionText">Some text</div> <div class="captionLine"> </div> </caption> <tr> <td>something</td> </tr> </table> <table style="width:300px;"> <caption width="100%" name="caption2"> <div class="captionText">Some text</div> <div class="captionLine"> </div> </caption> <tr> <td>something</td> </tr> </table> <script type="text/javascript"> function getElementsByClassName(node, class_name) { elems = node.all || node.getElementsByTagName('*'); var arr = new Array(); for(j = 0; j < elems.length; j++) { if (elems[j].className == class_name) arr[arr.length] = elems[j]; } return arr; } function resizeCaptionLine() { var elems = getElementsByClassName(document, 'captionLine'); for(i = 0; i < elems.length ; i++) { var parent = elems[i].parentNode; var sibling = getElementsByClassName(parent, 'captionText'); var width = parent.offsetWidth - sibling[0].offsetWidth; if(elems[i].currentStyle) { var currentMargin = elems[i].currentStyle.marginLeft; var margin = parseInt(currentMargin.substr(0,currentMargin.length-2)); elems[i].style.marginLeft = (sibling[0].offsetWidth) + "px"; } else if (document.defaultView && document.defaultView.getComputedStyle) { var currentStyle = document.defaultView.getComputedStyle(elems[i], ''); var currentMargin = currentStyle.marginLeft; var margin = parseInt(currentMargin.substr(0,currentMargin.length-2)); elems[i].style.marginLeft = (sibling[0].offsetWidth + margin) + "px"; } else { var currentMargin = elems[i].style.marginLeft; var margin = parseInt(currentMargin.substr(0,currentMargin.length-2)); elems[i].style.marginLeft = (sibling[0].offsetWidth) + "px"; } elems[i].style.width = (width - margin)+"px"; } } </script> </body> 

उत्तर वास्तव में सरल है! यदि आपने बाईं ओर डिवि (मेनू) को तय किया है, तो निश्चित डिवी फ्लोट दें: बाएं और आपका सही लचीली डिवीजन मार्जिन-बायां जो कि पहले तय डिवाई के चौड़ाई बड़ा है।