दिलचस्प पोस्ट
आईबी डीडेसिबल, आईबीनिस्पेक्टेबल – इंटरफेस बिल्डर अद्यतन नहीं करता है यूनिकोडएएनकोड त्रुटि: 'charmap' कोडेक अक्षरों को एन्कोड नहीं कर सकता मैं व्युत्पन्न क्लास कन्स्ट्रक्टर में बेस क्लास सदस्य चर को कैसे आरंभ करूं? डबल मुक्त या भ्रष्टाचार … लेकिन क्यों? MongoDB के साथ एक नेस्टेड ऐरे अपडेट करना कैसे एक UIImage 90 डिग्री घुमाएगी? डीबग बनाम रिलीज प्रदर्शन स्विफ्ट में फ्लोट से आईटी में कनवर्ट करें सीडी में लिनक्स पर स्टड-आउट धागा सुरक्षित? क्या MSTest परिनियोजन आइटम केवल कार्य करते समय प्रोजेक्ट टेस्ट सेटिंग्स फ़ाइल में मौजूद होते हैं? mysql – कितने स्तंभ बहुत अधिक हैं? निर्माता चेतावनी में इसे लेक AutoMapper.CreateMaps कहां रखें? भेजने के लिए एंड्रॉइड कैमरा से आरटीपी पैकेट बनाना पायथन 2 से urllib2 के साथ HTTP हेड अनुरोध बनाना

क्षैतिज रूप से जारी रखने के लिए निश्चित-चौड़ाई DIV के अंदर फ़्लोटिंग डीआईवी कैसे प्राप्त करें?

मेरे पास एक निश्चित ऊंचाई और चौड़ाई (275x1000px) के साथ एक कंटेनर DIV है इस डीआईवी में मैं 300px की चौड़ाई के साथ प्रत्येक को एक से अधिक फ़्लोटिंग डीआईवी करना चाहता हूं, और एक क्षैतिज (एक्स-अक्ष) स्क्रॉलबार दिखाई देता है, जो उपयोगकर्ता को सब कुछ देखने के लिए बाएं और दायां स्क्रॉल करने की अनुमति देता है

यह अब तक मेरा सीएसएस है:

div#container { height: 275px; width: 1000px; overflow-x: auto; overflow-y: hidden; max-height: 275px; } div#container div.block { float: left; margin: 3px 90px 0 3px; } 

समस्या यह है कि तैरते डीआईवी कंटेनर की चौड़ाई से पहले जारी नहीं रहेगा। तीन फ्लोटिंग डीआईवी डालकर वे नीचे जारी रहेगी। अगर मैं अतिप्रवाह- y को स्वतः बदलता हूं, तो ऊर्ध्वाधर स्क्रॉलबार दिखाई देता है और मैं नीचे स्क्रॉल कर सकता हूँ।

मैं इसे कैसे बदल सकता हूं ताकि एक दूसरे के नीचे जा रहे बिना तैरते डीआईवी जारी रहें?

Solutions Collecting From Web of "क्षैतिज रूप से जारी रखने के लिए निश्चित-चौड़ाई DIV के अंदर फ़्लोटिंग डीआईवी कैसे प्राप्त करें?"

 div#container { height: 275px; width: 1000px; overflow: auto; white-space: nowrap; } div#container span.block { width: 300px; display: inline-block; } 

यहां की चाल केवल तत्व है जो डिफ़ॉल्ट रूप से इनलाइन के रूप में व्यवहार करते हैं जो ठीक ढंग से व्यवहार करते हैं, जब इंटरनेट एक्सप्लोरर में इनलाइन-ब्लॉक पर सेट होता है, तो आंतरिक कंटेनरों को <div> के बजाय <span> होना चाहिए।

ब्लॉकों को रखने के लिए आपको एक बड़ी चौड़ाई के साथ एक अतिरिक्त डिवा की आवश्यकता है, फिर वे कंटेनर डिवा से अधिक विस्तार करेंगे और एक नई लाइन में नहीं छोड़ेंगे।

एचटीएमएल:

 <div id="container"> <div id="width"> <div class="block"> <!-- contents of block --> </div> <div class="block"> <!-- contents of block --> </div> <div class="block"> <!-- contents of block --> </div> <!-- more blocks here --> </div> </div> 

सीएसएस:

 #container { height: 275px; width: 1000px; overflow-x: auto; overflow-y: hidden; max-height: 275px; } #container #width { width:2000px; /* make this the width you need for x number of blocks */ } #container div.block { float: left; margin: 3px 90px 0 3px; } 
 #row { white-space: nowrap; /* important */ overflow: auto; } .items { display: inline-block; } 
 <div id="row"> <div class="items"> <img src="//placehold.it/200/100" alt="item 1" /> </div> <div class="items"> <img src="//placehold.it/200/100" alt="item 2" /> </div> <div class="items"> <img src="//placehold.it/200/100" alt="item 3" /> </div> <div class="items"> <img src="//placehold.it/200/100" alt="item 4" /> </div> <div class="items"> <img src="//placehold.it/200/100" alt="item 5" /> </div> <div class="items"> <img src="//placehold.it/200/100" alt="item 6" /> </div> <div class="items"> <img src="//placehold.it/200/100" alt="item 7" /> </div> <div class="items"> <img src="//placehold.it/200/100" alt="item 8" /> </div> <div class="items"> <img src="//placehold.it/200/100" alt="item 9" /> </div> <div class="items"> <img src="//placehold.it/200/100" alt="item 10" /> </div> </div> 

तालिका समाधान बहुत अच्छी तरह से काम करना चाहिए।

यदि आप तालिकाओं का उपयोग नहीं करना चाहते हैं, तो आप #container के अंदर एक और div में सभी .block divs डाल सकते हैं और पृष्ठ को लोड करने के बाद जावास्क्रिप्ट का उपयोग करके "इन-बाय-डिवि" को एक निश्चित-गणना वाली चौड़ाई दें।

बेशक, यदि आप पहले से ही जानते हैं कि आपके पास कितने ब्लाक हैं / यदि संख्या तय हो गई है, तो आप सीएसएस के जरिए एक निश्चित चौड़ाई "इन-इन-डिवि" दे सकते हैं।

व्यापक चौड़ाई के साथ अपने डिवाइज़ को दूसरे डिवा में लपेटें।

 <div style="width:230px;overflow-x:auto;background-color:#ccc;"> <div style="width:400px"> <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div> <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div> <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div> </div> </div> 

ऐसा लगता है कि आप डिवी के साथ गैलरी कर रहे हैं?

क्या आप divs के लिए उपयोग कर रहे हैं?

फ्लोटिंग डिवाइज़ के सभी सिरदर्द के बिना समान प्रभाव प्राप्त करने के लिए ली के अंदर स्पॅन के साथ उल / ली का इस्तेमाल करना आसान हो सकता है।

उपयोग:

  div#container { overflow: auto; } 

या शैली के साथ तीन divs नीचे एक समाशोधन DIV जोड़ें:

  { clear: both } 

ऐसे डिवाइज़ को रखें जिसे आप टेबल में स्क्रॉल करना चाहते हैं।

 <div style='width:1000;border:2 solid red;overflow-x:auto'> <table><tr> <td><div style='width:300;height:200;border:1 solid black'>Cell 1&nbsp;</div></td> <td><div style='width:300;height:200;border:1 solid black'>Cell 2&nbsp;</div></td> <td><div style='width:300;height:200;border:1 solid black'>Cell 3&nbsp;</div></td> <td><div style='width:300;height:200;border:1 solid black'>Cell 4&nbsp;</div></td> <td><div style='width:300;height:200;border:1 solid black'>Cell 5&nbsp;</div></td> </tr></table> </div> 

संपादित करें: मैंने इनमें से 3 सुझाए गए समाधानों की कोशिश की – वे सभी Google Chrome में ठीक काम करते हैं – लेकिन पहले एक (कंटेनर 1) IE में काम नहीं करता (आंकड़े देखें) – इसलिए SPAN समाधान मेरे वोट प्राप्त करता है :-):

 <html> <body> <style> div#container1 { height: 275px; width: 100%; overflow: auto; white-space: nowrap; border:2 solid red; } div#container1 div.block { width: 300px; height: 200px; display: inline-block; border: 1 solid black; } div#container2 { height: 275px; width: 100%; overflow: auto; white-space: nowrap; border:2 solid red; } div#container2 span.block { width: 300px; height: 200px; display: inline-block; border: 1 solid black; } div#container3 { height: 275px; width: 100%; overflow: auto; white-space: nowrap; border:2 solid red; } div#container3 div.block { width: 300px; height: 200px; display: inline-block; border: 1 solid black; } </style> <p> <div id='container1'> <div class='block'>Cell 1&nbsp;</div> <div class='block'>Cell 2&nbsp;</div> <div class='block'>Cell 3&nbsp;</div> <div class='block'>Cell 4&nbsp;</div> <div class='block'>Cell 5&nbsp;</div> </div> <p> <div id='container2'> <span class='block'>Cell 1&nbsp;</span> <span class='block'>Cell 2&nbsp;</span> <span class='block'>Cell 3&nbsp;</span> <span class='block'>Cell 4&nbsp;</span> <span class='block'>Cell 5&nbsp;</span> </div> <p> <div id='container3'> <table><tr> <td><div class='block'>Cell 1&nbsp;</div></td> <td><div class='block'>Cell 2&nbsp;</div></td> <td><div class='block'>Cell 3&nbsp;</div></td> <td><div class='block'>Cell 4&nbsp;</div></td> <td><div class='block'>Cell 5&nbsp;</div></td> </tr></table> </div> </body> </html> 

2 संपादित करें:

मैंने यह test page ran browsershots.org के माध्यम से देखा है, यह देखने के लिए कि अलग-अलग ब्राउज़र कैसे इसे संभालते हैं। निष्कर्ष: ब्राउज़र संगतता बेकार है 🙂

http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm

टेबल समाधान ने अधिक बार काम किया – लेकिन स्पैन ऑप्शन (जो क्लीनर है) केवल ब्राउज़रों पर तोड़ दिया जो मैंने कभी नहीं सुना है। 🙂

मेरे पूर्व:

डिविटी चौड़ाई: 850px ग्रिडव्यू टेम्पलटेड कॉलम आइटमटामप्लेट

 <span class="buttonspanlt"></span><asp:Button ID="imgEditSave" runat="server" Text="Edit SubStatus" CssClass="buttoncenter" OnClick="imgEditSave_OnClick"/><span class="buttonspanrt"></span> <span style="display:none;float:left;clear:left;" id="spangrdCancel" runat="server"><span class="buttonspanlt"></span><asp:Button ID="imgCancel" runat="server" Text="Cancel" class="buttoncenter"/><span class="buttonspanrt"></span></span> 

अंत मद टेंप्लेट एंड टेम्पलेटेड कॉलम एंड ग्रिडव्यू एंड डिव

बटन ने मध्य (वास्तविक बटन) दायां स्पेस छोड़ दिया है, जहां फिक्स्ड नहीं है क्योंकि निश्चित चौड़ाई वाला बाहरी डिवा होता है।

मुझे बटन के बाहर चौड़ाई 140px के साथ अतिरिक्त डिवा का उपयोग करना था, मदमेटप्लेट के अंदर तो यह काम किया

उम्मीद है की यह मदद करेगा!!!

धन्यवाद हरीश